Jump to content

Vertical-align: Middle; Does Not Work


labaude
 Share

Recommended Posts

tables tut, tut, multiple id with same name, when they should unique.anyway when you have corrected the id (use class)below is similar to what you are trying to achieve<!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=iso-8859-1" /><title>Untitled Document</title><script type="text/javascript">/*<![CDATA[*//*---->*//*--*//*]]>*/</script> <style type="text/css">#mytable td.menucell {vertical-align:middle; padding: 0; line-height: 13px; font-size:12px;font-family:sans-serif;font-size:11px;font-size-adjust:none;font-stretch:normal;font-style:normal;font-variant:normal;font-weight:bold;height:31px;margin:0;padding-left:5px;padding-right:2px;width:155px;}#mytable td.menucell a{text-decoration:none; color: #000;}#mytable td.menucell a:hover{color: #fff;}</style></head><body><table width="980" border="1" cellspacing="0" cellpadding="0" id="mytable"> <tr> <td class="menucell"><a href="a">menu 1</a></td> <td rowspan="4"> </td> </tr> <tr> <td class="menucell"><a href="b">menu 2</a></td> </tr> <tr> <td class="menucell"><a href="c">menu 3</a></td> </tr> <tr> <td class="menucell"><a href="d">menu 4<br />Line2</a></td> </tr></table></body></html>

Link to comment
Share on other sites

I can see that your code is working but your style is applied to the td.Mine is applied to the TR and is different because it calls a different style due to the javascript behindI need those line being differents :<tr id='menu1'><tr id='menu2'>Is this what i need to change ? Because if this is the case i can't see how or can i also apply the code you sent below on the TD ?Thanks for your reply.

tables tut, tut, multiple id with same name, when they should unique.anyway when you have corrected the id (use class)below is similar to what you are trying to achieve<!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=iso-8859-1" /><title>Untitled Document</title><script type="text/javascript">/*<![CDATA[*//*---->*//*--*//*]]>*/</script> <style type="text/css">#mytable td.menucell {vertical-align:middle; padding: 0; line-height: 13px; font-size:12px;font-family:sans-serif;font-size:11px;font-size-adjust:none;font-stretch:normal;font-style:normal;font-variant:normal;font-weight:bold;height:31px;margin:0;padding-left:5px;padding-right:2px;width:155px;}#mytable td.menucell a{text-decoration:none; color: #000;}#mytable td.menucell a:hover{color: #fff;}</style></head><body><table width="980" border="1" cellspacing="0" cellpadding="0" id="mytable"> <tr> <td class="menucell"><a href="a">menu 1</a></td> <td rowspan="4"> </td> </tr> <tr> <td class="menucell"><a href="b">menu 2</a></td> </tr> <tr> <td class="menucell"><a href="c">menu 3</a></td> </tr> <tr> <td class="menucell"><a href="d">menu 4<br />Line2</a></td> </tr></table></body></html>
Link to comment
Share on other sites

by assign the anchors as a block element height of <td>cell you cannot use a cells vertical align, to vertical align the text within that block.instead using display: block; and assigning background image to the anchor, assign the image to the cell itself.now that the anchor is no longer a block element that is same height of the cell, but the height of the text it can now be vertical align as required.example below:<!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=iso-8859-1" /><title>Untitled Document</title><script type="text/javascript">/*<![CDATA[*//*---->*//*--*//*]]>*/</script> <style type="text/css">#mytable td.menucell {vertical-align:middle; padding: 0; line-height: 13px; font-size:12px;font-family:sans-serif;font-size:11px;font-size-adjust:none;font-stretch:normal;font-style:normal;font-variant:normal;font-weight:bold;height:31px;margin:0;padding-left:5px;padding-right:2px; color: #000;width:155px;background-image:url(tabBut_norm.png);}#mytable td.menucell a{ text-decoration:none;color: #000;}#mytable td.menucell:hover{ background-image:url(tabBut_hover.png);}#mytable td.menucell:hover a{ color: #fff;}</style></head><body><table width="980" border="1" cellspacing="0" cellpadding="0" id="mytable"> <tr> <td class="menucell"><a href="a">menu 1</a></td> <td rowspan="4"> </td> </tr> <tr> <td class="menucell"><a href="b">menu 2</a></td> </tr> <tr> <td class="menucell"><a href="c">menu 3</a></td> </tr> <tr> <td class="menucell"><a href="d">menu 4<br />Line2</a></td> </tr></table></body></html>

Edited by dsonesuk
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...