Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 2273
  • Last Modified:

How do I vertically-center multi-line text in css?

Hi,

I am trying to vertically center dynamic text content in a css <li>. Since I don;t know how much text will be coming from the database I cannot use some of the solutions available online. I tried using the display: table/display: table-cell/ vertical-alignment:middle but it is not working even though I  used extra divs to accommodate the display method. So, what would be the best way of doing this?

Below is the code for that session of my page and my css. The text that needs to be vertically centered is in <li> items with class "MainContentListingItemColumnText "



Thank you for your help.
0
morenoed
Asked:
morenoed
  • 4
  • 3
2 Solutions
 
asafadisCommented:
0
 
morenoedAuthor Commented:
asafadis,

Thanks for your response. Unfortunately I cannot use this approach since I don't know how many lines I will have in a box. remember, the text is dynamic........
0
 
asafadisCommented:
Are the list items vertically or horizontally aligned?
To they have a fixed height?
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
morenoedAuthor Commented:
The images to the left of the text are 70px high. I guess I jcould say that the maximum high for the text div would be also 70px. The <li> for the text has to be vertically centered to the image to the left. Here is a link to the page as it is now. You will see that there are several images with text to the right. All that text would be vertically centered to the respective picture.


http://wrc2003-test.vcu.edu/newbusiness/Listing.html

Thanks,
0
 
asafadisCommented:
Got it.

li a {
    height: 70px;
    display: table-cell;
    vertical-align: middle;
}
 
/* So pretty much you were just missing setting a fixed height. */

Open in new window

0
 
morenoedAuthor Commented:
Thanks, asafadis,

I tried your solution and it still does not work......  

I attached the full code of the page. Maybe there is something else before that section that is messing up the solution....

I appreciate your help.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<!--[if IE 5]>
<style type="text/css"> 
/* place css box model fixes for IE 5* in this conditional comment */
.Business #sidebar1 { width: 230px; }
</style>
<![endif]--><!--[if IE]>
<style type="text/css"> 
/* place css fixes for all versions of IE in this conditional comment */
.Business #sidebar1 { padding-top: 30px; }
.Business #MainContent { zoom: 1; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</style>
<![endif]-->
<link href="css/business.css" rel="stylesheet" type="text/css">
 
</head>
 
<body>
 
 
 
 
<div class="Container">
	
	<div class="BusinessLogo">
	  <ul class="BusinessLogoHeader">
		  <li><img src="images/headerlogo.gif" alt="Business Logo" width="250" height="35" border="0" usemap="#Map">
			<map name="Map">
				<area shape="rect" coords="-15,-7,258,42" href="#">
			</map>
		  </li>
	  </ul>
	</div>
	
  	<div class="Header">
	   <ul class="SearchContainer" >
				<li class="SearchText" >Search </li>
				<li class="SearchInput" ><input name="" type="text" size="17" ></li>	
				<li class="SearchGo" ><img src="images/gobox.gif" width="22" height="20" alt="Go"></li>
	
	  </ul>
  
  	</div>
 
  	<div class="HeaderMenu">
	  <ul class="HeaderMenuItemContainer" >
			<li class="HeaderMenuItem1"  >About the<br>
				School</li>
			<li class="HeaderMenuItemAll" >Undergraduate <br>
				Studies</li>
			<li class="HeaderMenuItemAll"  >Graduate<br>
				Studies</li>
			<li class="HeaderMenuItemAll"  >Corporate<br>
				Education</li>
			<li class="HeaderMenuItemAll"   >Careers and<br>
				Recruiting</li>
			<li class="HeaderMenuItemAll"   >Faculty and<br>
				Research</li>
			<li class="HeaderMenuItemAll"   >Departments<br>
				and Centers</li>
			<li class="HeaderMenuItemAll"  >Support<br>
				the School</li>
		</ul>
	
	</div>
  
  
	<div class="Sidebar"> 
 
	 	
		<ul class="SidebarBoxListing">
			<li class="SidebarBoxListingItem"><a href="#">Information Sessions</a></li>
			<li class="SidebarBoxListingItem"><a href="#">Admissions Process</a></li>
			<li class="SidebarBoxListingItem"><a href="#">Faculty</a></li>
			<li class="SidebarBoxListingItem"><a href="#">Snead Hall</a></li>
			<li class="SidebarBoxListingItem"><a href="#">Statistics</a></li>
			<li class="SidebarBoxListingItem"><a href="#">Student Life</a></li>
			<li class="SidebarBoxListingItem"><a href="#">Tuition and Financial Aid</a></li>
			<li class="SidebarBoxListingItem"><a href="#">Your Career</a></li>
			<li class="SidebarBoxListingItem"><a href="#">Contact Us</a></li>
			
		<!-- end #sidebarboxListing -->
		</ul>	  	  
	 	
		<ul class="SidebarBoxListing">
			<li class="SidebarBoxListingItem"><a href="#">View Brochure</a></li>
			<li class="SidebarBoxListingItem"><a href="#">Apply</a></li>
			<!-- end #sidebarboxListing -->
		</ul>	
		
		
		<ul  class="SidebarBoxListing NoBorder"><li class="SidebarBoxListingItem" ><a href="#">For Current Students</a></li>
			<li class="SidebarBoxListingItem"><a href="#">Graduate Studies home</a></li>
			
			<!-- end #sidebarbox -->
		</ul>		
		
		
		  	  
  	<!-- end #sidebar -->
	</div>
  
  
  	<div class="MainContent" >
		<ul>
			<li class="LinkPath"><a href="#">Link</a>&nbsp;&gt;&nbsp;<a href="#">Link</a>&nbsp;&gt;&nbsp;<a href="#">Link</a>&nbsp;&gt;&nbsp;<a href="#">Link</a></li>
			
			
			<li class="MainContentListingTitle">Graduate Studies</li>
	
			<li class="MainContentListingBody">Introduction paragraph about graduate studies at VCUbusiness.Raessenim inci bla facidunt lum quip elit alit eui blaoreet lum quat praesse quamcon et, vullan henis atue doloborem at wis am do exeros dit dolor sim in hendiat. Raessenim inci bla facidunt lum.<a href="#"></a>	
			</li>
	
					<div class="MainContentListingContainerBackground">
						
						<div  class="MainContentListingColumnLeft">
							<ul class="MainContentListingLeftItem">
																		
																					<li class="MainContentListingColumnItemTitle">New Program  MS in Management</li>
																					
																					<li class="MainContentListingItemTwoColumnsContainer">
																					
																					
																						<ul class="MainContentListingItemColumnContainer">
																							<li class="MainContentListingItemColumnPicture"><img src="images/VCU_SB_Exterior-4470x70.gif" width="70" height="70" alt="PictureNew"></li>
																							<li class="MainContentListingItemColumnText"><a href="#">VCU MBA</a></li>
																						</ul>
																						<ul class="MainContentListingItemColumnContainer">
																							<li class="MainContentListingItemColumnPicture"><img src="images/VCU_SB_Exterior-5.jpg" width="70" height="70" alt="Picture"></li>
																							<li class="MainContentListingItemColumnText"><a href="#">Fast Track Executive MBA</a></li>
																						</ul>
																						
																						<br class="clearfloat">	
																					</li>
																					
																					
																					
																					<li class="MainContentListingColumnItemBody">Optional MBA Concentrations: Decision Sciences, Economics, Finance, Human Resources, Information Systems, Marketing, Real Estate</li>
																					
																					<li class="MainContentListingColumnItemBody">Dual Degrees: <a href="#">MBA/MS in Information Systems</a>, <a href="#">MBA Pharm D</a></li>
																		
								</ul>
															
															
																		<ul class="MainContentListingLeftItem NoBorder">
																		
																			<li class="MainContentListingColumnItemTitle">New Program  MS in Management</li>
																					
																					<li class="MainContentListingItemTwoColumnsContainer">
																					
																					
																						<ul class="MainContentListingItemColumnContainer">
																							<li class="MainContentListingItemColumnPicture"><img src="images/shutterstock_8050993.jpg" width="70" height="70" alt="Picture"></li>
																							<li class="MainContentListingItemColumnText"><a href="#">VCU MBA</a></li>
																						</ul>
																						<ul class="MainContentListingItemColumnContainer">
																							<li class="MainContentListingItemColumnPicture"><img src="images/shutterstock_10464271.jpg" width="70" height="70" alt="Picture"></li>
																							<li class="MainContentListingItemColumnText"><a href="#">Decision<br>
																							Sciences</a></li>
																						</ul>
																						
																						<br class="clearfloat">	
																					</li>
																					<li class="MainContentListingItemTwoColumnsContainer">
																					
																					
																						<ul class="MainContentListingItemColumnContainer">
																							<li class="MainContentListingItemColumnPicture"><img src="images/shutterstock_10317808.jpg" width="70" height="70" alt="Picture"></li>
																							<li class="MainContentListingItemColumnText"><a href="#">Economics</a></li>
																						</ul>
																						<ul class="MainContentListingItemColumnContainer">
																							<li class="MainContentListingItemColumnPicture"><img src="images/shutterstock_10302709.jpg" width="70" height="70" alt="Picture"></li>
																							<li class="MainContentListingItemColumnText"><a href="#">Finance</a></li>
																						</ul>
																						
																						<br class="clearfloat">	
																					</li>
																					
																				<li class="MainContentListingItemTwoColumnsContainer">
																					
																					
																						<ul class="MainContentListingItemColumnContainer">
																							<li class="MainContentListingItemColumnPicture"><img src="images/shutterstock_8050993.jpg" width="70" height="70" alt="Picture"></li>
																							<li class="MainContentListingItemColumnText"><a href="#">Global <br>
																							Marketing<br>
																							Management</a></li>
																						</ul>
																						<ul class="MainContentListingItemColumnContainer">
																							<li class="MainContentListingItemColumnPicture"><img src="images/shutterstock_10464271.jpg" width="70" height="70" alt="Picture"></li>
																							<li class="MainContentListingItemColumnText"><a href="#">Human<br>
																							Resource<br>
																							Management</a></li>
																						</ul>
																						
																						<br class="clearfloat">	
																			</li>
																					<li class="MainContentListingItemTwoColumnsContainer">
																					
																					
																						<ul class="MainContentListingItemColumnContainer">
																							<li class="MainContentListingItemColumnPicture"><img src="images/shutterstock_10317808.jpg" width="70" height="70" alt="Picture"></li>
																							<li class="MainContentListingItemColumnText"><a href="#">Information <br>
																							Systems</a></li>
																						</ul>
																						<ul class="MainContentListingItemColumnContainer">
																							<li class="MainContentListingItemColumnPicture"><img src="images/shutterstock_10302709.jpg" width="70" height="70" alt="Picture"></li>
																							<li class="MainContentListingItemColumnText"><a href="#">IT Management Executive <br>
																							Program</a></li>
																						</ul>
																						
																						<br class="clearfloat">	
																					</li>
																					
																		
							</ul>
															
						</div>
 
						<div class="MainContentListingColumnRight">
																		
																		<ul class="MainContentListingRightItem">
																									
																			<li class="MainContentListingColumnItemTitle">New Program  MS in Management</li>
																					
																					<li class="MainContentListingItemColumnRightContainer">
																					
																					
																						<ul>
																							<li class="MainContentListingItemColumnPicture"><img src="images/shutterstock_11041921.jpg" width="70" height="70" alt="Picture"></li>
																							<li class="MainContentListingItemColumnText MainContentListingItemColumnRightTextWidth"><a href="#">Accounting</a></li>
																						</ul>
																						
																						<br class="clearfloat">	
																			</li>
																			<li class="MainContentListingItemColumnRightContainer">
																					
																					
																						<ul>
																							<li class="MainContentListingItemColumnPicture"><img src="images/shutterstock_11312932-2.jpg" width="70" height="70" alt="Picture"></li>
																							<li class="MainContentListingItemColumnText MainContentListingItemColumnRightTextWidth"><a href="#">Information<br>
																							Systems</a></li>
																				</ul>
																						
																						<br class="clearfloat">	
																			</li>
																					
																				<li class="MainContentListingItemColumnRightContainer">
																					
																					
																						<ul>
																							<li class="MainContentListingItemColumnPicture"><img src="images/shutterstock_11846929.jpg" width="70" height="70" alt="Picture"></li>
																							<li class="MainContentListingItemColumnText MainContentListingItemColumnRightTextWidth"><a href="#">Management<br>
																							(Organization Behavior)</a></li>
																					</ul>
																						
																						<br class="clearfloat">	
																			</li>
																	</ul>				
<ul class="MainContentListingRightItem NoBorder">
																									
																			<li class="MainContentListingColumnItemTitle">New Program  MS in Management</li>
																					
																					<li class="MainContentListingItemColumnRightContainer">
																					
																					
																						<ul>
																							<li class="MainContentListingItemColumnPicture"><img src="images/shutterstock_11707126.jpg" width="70" height="70" alt="Picture"></li>
																							<li class="MainContentListingItemColumnText"><a href="#">Accounting</a></li>
																						</ul>
																						
																						<br class="clearfloat">	
																			</li>
																			<li class="MainContentListingItemColumnRightContainer">
																					
																					
																						<ul>
																							<li class="MainContentListingItemColumnPicture"><img src="images/shutterstock_11312932.jpg" width="70" height="70" alt="Picture"></li>
																							<li class="MainContentListingItemColumnText MainContentListingItemColumnRightTextWidth"><a href="#">Business<br>
																							Administration
																						</a></li>
																				</ul>
																						
																						<br class="clearfloat">	
																			</li>
																					
																				<li class="MainContentListingItemColumnRightContainer">
																					
																					
																						<ul>
																							<li class="MainContentListingItemColumnPicture"><img src="images/shutterstock_11707126.jpg" width="70" height="70" alt="Picture"></li>
																							<li class="MainContentListingItemColumnText MainContentListingItemColumnRightTextWidth"><a href="#">Accounting</a></li>
																					</ul>
																						
																						<br class="clearfloat">	
																			</li>
																	</ul>
						</div>
				
				
				<br class="clearfloat">	
				<!--End of MainContentListingContainerBackground-->
				</div>
 
 
 
		</ul>
		
		
		
		
		
		
		
		
 		
 		<!-- end #MainContentListing -->
 	</div>
	<br class="clearfloat">
	<div class="Footer" >
		<a href="#">School of Business</a> |  <a href="#">Virginia Commonwealth University</a> |  Snead Hall  |  301 W. Main Street  |  Box 844000, Richmond, VA 23284-4000  |  T: 804 828 1595  |<a href="mailto:"> xxxxxxxxxx@vcu.edu</a>  |  © 2009 VCU School of Business. All rights reserved. <br>
	<a href="#">Contact the School of Business</a> |  <a href="#">Faculty Directory</a> |  <a href="#">Directions to the school </a>|  <a href="#">VIrginia Commonwealth University - VCU</a>  |  Updated: XX/XX/09 </div>  
 
  <!-- This clearing element should immediately follow the #MainContent div in order to force the #container div to contain all child floats -->
  
	<!-- end #container -->
</div>
</body>
</html>

Open in new window

0
 
asafadisCommented:
The following snippet works perfectly in Firefox.
Not for IE though.  I hate IE.  ANYWAYS... I'm trying to find a solution for IE.

.MainContentListingItemColumnText a {
	height:70px;
	display:table-cell;
	vertical-align:middle;
}

Open in new window

0
 
David S.Commented:
It would work in IE8 too, but not previous IE versions.

This shows the workaround for IE6 and IE7: http://www.dynamicsitesolutions.com/css/vertically-centering-elements/
0

Featured Post

[Webinar] Cloud and Mobile-First Strategy

Maybe you’ve fully adopted the cloud since the beginning. Or maybe you started with on-prem resources but are pursuing a “cloud and mobile first” strategy. Getting to that end state has its challenges. Discover how to build out a 100% cloud and mobile IT strategy in this webinar.

  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now