Vertically align text in buttons (some one line, some two lines)

[mike.SkuLL]

Hi, code gurus!I'm making a horizontal menu with 5 buttons, each with a text in the middle - see this image for reference.I'm using this tutorial in an attempt to learn about making a good horizontal menu with rollovers. So far so good, but I would also like to arrange the text vertically - right now, the text sits at the bottom. Normally, I'd try using line-height, but that doesn't work visually, because as some of the buttons show two lines of text and the gap between those lines becomes too big. Here is the code so far. Five buttons (<cssnav>) inside the <navigation> div, each with text in <span>

<div id="navigation"><div class="cssnav"><a href="index.html" title="Home"><img src="downbtn.jpg" alt="Home" /><span>HOME</span></a></div><div class="cssnav"><a href="index.html" title="About Mediation"><img src="downbtn.jpg" alt="About Mediation" /><span>ABOUT<br />MEDIATION</span></a></div><div class="cssnav"><a href="index.html" title="Types of Mediation"><img src="downbtn.jpg" alt="Types of Mediation" /><span>TYPES OF<br />MEDIATION</span></a></div><div class="cssnav"><a href="index.html" title="Offers and Services"><img src="downbtn.jpg" alt="Offers and Services" /><span>OUR OFFERS <br />& SERVICES</span></a></div><div class="cssnav"><a href="index.html" title="Contact"><img src="downbtn.jpg" alt="Contact" /><span>CONTACT</span></a></div></div>

and the CSS:

#navigation{width: 800px;height: 80px;color: #FFFFFF;}.cssnav{position:relative;float: left;padding: 0;margin: 0;background-image: url(../overbtn.jpg);backgtound-repeat: no-repeat;width: 160px;height: 80px;overflow:hidden;/* for ie to hide extra height*/}						.cssnav a {display: block;color: #000000;font-size: 11px;width: 160px;height: 80px;display: block;float: left;color: black; text-decoration: none;overflow:hidden;/* for ie to hide extra height*/}			.cssnav a:hover {color: #ffffff;}				.cssnav img {width: 160px; height: 80px; border: 0;}* html a:hover{visibility:visible}.cssnav a:hover img{visibility:hidden}.cssnav span {position: absolute;left: 0px; bottom: 0px;font-size: 16px;font-weight: bold; text-align: center;width: 160px;cursor: pointer;}

Can anyone help me with this? The basic idea is to have the button text vertically aligned in the centre of each button. I've tried a few different methods, but I'm not knowledgeable enough to know which one applies to this case and what to change. I'm sure there is an easy way to accomplish this!Any other comments on the code & ways to improve/simplify will also be greatly appreciated!

[lastlifelost]

It's a mite bit convoluted, but this works for vertical centering:Vertical Centering with three nested divs

.vcenterOuter {	display: table; 	height: 62px; 	#position: relative;  /* required for <IE8 centering -- will not validate */	overflow: hidden}.vcenterMiddle {	#position: absolute;  /* required for <IE8 centering -- will not validate */		#top: 50%;		/* required for <IE8 centering -- will not validate */		#left: 50%;		/* required for <IE8 centering -- will not validate */	display: table-cell; 	vertical-align: middle;}.vcenterInner {	display: block;	#position: relative;   /* required for <IE8 centering -- will not validate */		#top: -50%;		/* required for <IE8 centering -- will not validate */		#left: -50%;	   /* required for <IE8 centering -- will not validate */	}

[dsonesuk]

In a previous posting similar to this, there were two option server side as in PHP, or javascript.what you do is use these to count the tag which forces the new line, as in your example the '<br />' tag, now depending on how many of these there are determines what the line-height should be.

[mike.SkuLL]

Hey, thanks very much for your replies, guys. But I don't understand either of you lastlifelost, I sort of get your example, but I have no idea how to implement it into my code. Any tips how to do this specifically for my existing layout?dsonesuk, not sure what you mean at all. I have a vague feeling that using <br /> in the button text is a bit clumsy, but I have no idea how else to achieve the same look.

[lastlifelost]

That's fine, Mike! Here's what you do with the code I've provided:CSS

.vcenterOuter {	display: table; 	height: 62px;		   /* adjust this for your needed height */	#position: relative;  /* required for <IE8 centering -- will not validate */	overflow: hidden}.vcenterMiddle {	#position: absolute;  /* required for <IE8 centering -- will not validate */		#top: 50%;		/* required for <IE8 centering -- will not validate */		#left: 50%;		/* required for <IE8 centering -- will not validate */	display: table-cell; 	vertical-align: middle;}.vcenterInner {	display: block;	#position: relative;   /* required for <IE8 centering -- will not validate */		#top: -50%;		/* required for <IE8 centering -- will not validate */		#left: -50%;	   /* required for <IE8 centering -- will not validate */	}

HTML

<div class="vcenterOuter">	<div class="vcenterMiddle">		<div class="vcenterInner">			Whatever Text You Need, It can be whatever length you want, the CSS will vertically center, no matter how tall the content is.		</div>	</div></div>

[dsonesuk]

php auto height adjust, and vertical align

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><script type="text/javascript">/*<![CDATA[*//*---->*//*--*//*]]>*/</script><?php$font_pixelHeight=16; //set to size of font in menu.$top_bottom_margin_total=20;  //margin from top, bottom of menu to menu text$gap_between_menu_text = 2;$newline_tag="<b>"; // define newline tag for searching$menu_link = array ();$menutext = array ();$menu_link[0]='<a href="index.html" title="Home"><img src="../images/tabbuttonR.png" alt="Home" />';$menutext[0]='HOME';$menu_link[1]='<a href="index.html" title="About Mediation"><img src="../images/tabbuttonR.png" alt="About Mediation" />';$menutext[1]='ABOUT <b>MEDIATION</b> <b>MEDIATION</b>';$menu_link[2]='<a href="index.html" title="Types of Mediation"><img src="../images/tabbuttonR.png" alt="Types of Mediation" />';$menutext[2]='TYPES OF<b>MEDIATION</b><b>MEDIATION</b>';$menu_link[3]='<a href="index.html" title="Offers and Services"><img src="../images/tabbuttonR.png" alt="Offers and Services" />';$menutext[3]='OUR OFFERS <b>& SERVICES</b> ';$menu_link[4]='<a href="index.html" title="Contact"><img src="../images/tabbuttonR.png" alt="Contact" />';$menutext[4]='CONTACT';$menu_count=count($menu_link);?><style type="text/css">*{padding:0;margin:0;}body{font-family:Verdana, Arial, Helvetica, sans-serif; font-size:62.5%; margin:10px; background-color:#99FFFF;}p{margin:1em}h1, h2, h3, h4, h5, h6{margin:0.9em 7px;}h1 {padding:0;font-size:2em;}h2 {padding:0;font-size:1.84em;}h3 {padding:0;font-size:1.68em;}h4{padding:0;font-size:1.52em;}h5 {padding:0;font-size:1.36em;}h6 {padding:0; font-size:1.20em;}#navigation{font-family:Verdana, Arial, Helvetica, sans-serif;width: 800px;overflow:hidden;color: #FFFFFF;}.cssnav{position:relative;float: left;padding: 0;margin: 0;background: url(../images/tabbuttonR2.png) no-repeat;width: 160px;height: 80px;overflow:hidden;}.cssnav a{display: block;color: #000000;width: 160px;display: block;float: left;text-decoration: none;height:100%;background-color:#0099CC;}.cssnav a:hover{color: #ffffff;}.cssnav img{width: 100%;height: 100%;border: 0;float:left;}* html a:hover{visibility:visible}.cssnav a:hover img{visibility:hidden}.cssnav span{position: absolute;left: 0px;font-size: 16px;font-weight: bold;text-align: center;width: 160px;cursor: pointer;}#navigation a b{display:block;}</style></head><body><?php$newline_count=0;for($i=0;$i<$menu_count;$i++)	{	if($newline_count<substr_count($menutext[$i], $newline_tag))		{		$newline_count = (substr_count($menutext[$i], $newline_tag)+1);		}	}	$totalHeight=$newline_count*($font_pixelHeight+$gap_between_menu_text);$totalHeightPlusMargin=$totalHeight+$top_bottom_margin_total;echo '<div id="navigation">'."\n";$currentlinecount= array();for($i=0;$i<$menu_count;$i++)	{	$newline_count = (substr_count($menutext[$i], $newline_tag)+1);	$topmargin =  ($totalHeightPlusMargin - ($newline_count)*($font_pixelHeight+$gap_between_menu_text))/2;	echo '<div class="cssnav" style="height:'.$totalHeightPlusMargin.'px;">'.$menu_link[$i].'<span style="top:'.$topmargin.'px;">'.$menutext[$i].'</span></a></div>'."\n";	}	echo "</div>";?></body></html>

[mike.SkuLL]

Thanks for the replies, fellas. Your help is much appreciated. I shall have a look at these bits of code this weekend - hopefully I'll be able to understand :)Once again, thank you for your time and effort!

[airesofwar]

So IE does not support vertical text but with the javascript does this overcome that problem?