place the text in the vertical middle

[aliento]

Hello,

I have this code :

/* 
tables css
*/
table.menu_table td a{display: block  ; vertical-align: middle;} 
table.menu_table td a:link, table.menu_table td a:visited {font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
text-decoration:none;
	color : black;} 
table.menu_table td a:hover, table.menu_table td a:active {background-image: url('../images_all/row.gif'); color: #FFFFFF;  text-decoration: none; height: 20px; vertical-align: middle;} 

 

and at the html file :

<table class="menu_table" width="502"  height="19" border="0" cellspacing="0" cellpadding="0" ">

 

When the mouse is over it change the backround but it doesnt center the text vertical, it shows it at the top of the filed!

Any sugestion will be very valuable.

Thank you

[SuperBlue]

Simply add a top-margin of about 50% to the text, i asume you enclosed the text in paragraphs. Then it would be something like:

td p {
margin: 50% auto;
}

 

 

vertical-align:middle; on inline elements dosn't work as you expect, but it should on td elements. So try something like below instead:

 

/*

tables css

*/

td { vertical-align: middle; }

table.menu_table td a{display: block;}

table.menu_table td a:link, table.menu_table td a:visited {font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 10px;

text-decoration:none;

color : black;}

table.menu_table td a:hover, table.menu_table td a:active {background-image: url('../images_all/row.gif'); color: #FFFFFF;  text-decoration: none; height: 20px;}

 

[BoltZ]

You cannot do vertical-align:middle on inline elements. Try using

margin-top:5px;

margin-left:5px; or something like that. You could also try margin:50% auto

 

ps. aw he beat me to it. :/