Jump to content

Vertical Align Of Text


Padraic
 Share

Recommended Posts

I am having a problem with vertical alignment of text in my navbarI have tried this vertical align css code in three of the classes but no success: vertical-align:text-bottom;The two images ('grenmenu.gif' 'blumenu.gif') are just 20px by 1px and the background image (main.jpg 697px x 3px) are all working fine. The central navbar is 680pxHTML:<html><head><meta http-equiv="Content-Style-Type" content="text/css"><link rel=stylesheet type=text/css href=style.css></head><body><div class="navbarcontainer"><div class="navbar"><div class="navtabcontainer"><div class="navtab"><div class="lit"><a href="literature.htm">Literature</a></div><div class="separator">|</div><div class="join"><a href="join.htm">Membership?</a></div><div class="separator">|</div><div class="congress"><a href="congress.htm">Congress 2012</a></div><div class="separator">|</div><div class="events"><a href="events.htm">Upcoming events</a></div></div></div></div></div></body></html>CSS:.navbarcontainer {text-align:center;} .navbar {background-image:url('main.jpg');background-repeat:repeat-y;height:20px;margin-left:auto;margin-right:auto;width:697px;text-align:center;}.navtabcontainer {text-align:center;} .navtab {background-image:url('grenmenu.gif');background-repeat:repeat-x;text-align:center;vertical-align:text-bottom;font-weight:normal;font-family:arial;font-size:7px;color:#ff0000;margin-left:auto;margin-right:auto;width:680px;height:20px;}.separator {text-align:center;vertical-align:text-bottom;float:left;padding:0px;height:20px;width:1%;margin-right:0px;margin-left:0px;}.lit a {text-align:center;float:left;text-decoration:none;color:#ffffff;height:20px;width:10%;vertical-align:text-bottom;margin-right:0px;margin-left:0px;} .lit a:hover {background-image:url('blumenu.gif');background-repeat:repeat-x;text-align:center;text-decoration:none;font-weight:normal;font-family:arial;padding:0px;height:20px;color:#ccffff;display:block;}.join a {text-align:center;float:left;text-decoration:none;font-weight:normal;font-family:arial;padding:0px;height:20px;width:16%;color:#ffffff;margin-right:0px;margin-left:0px;} .join a:hover {background-image:url('blumenu.gif');background-repeat:repeat-x;text-align:center;text-decoration:none;font-weight:normal;font-family:arial;padding:0px;height:20px;color:#ccffff;display:block;}.congress a {text-align:center;float:left;text-decoration:none;font-weight:normal;font-family:arial;padding:0px;height:20px;width:24%;color:#ffffff;margin-right:0px;margin-left:0px;} .congress a:hover {background-image:url('blumenu.gif');background-repeat:repeat-x;text-align:center;text-decoration:none;font-weight:normal;font-family:arial;padding:0px;height:20px;color:#ccffff;display:block;}.events a {text-align:center;float:left;text-decoration:none;font-weight:normal;font-family:arial;padding:0px;height:20px;width:17%;color:#ffffff;margin-right:0px;margin-left:0px;}.events a:hover {background-image:url('blumenu.gif');background-repeat:repeat-x;text-align:center;text-decoration:none;font-weight:normal;font-family:arial;padding:0px;height:20px;color:#ccffff;display:block;}

Edited by Padraic
Link to comment
Share on other sites

To center text vertically, the easiest way is to give it a line height matching the height of the element you want it to be aligned with.

Link to comment
Share on other sites

Really i just want to align the text in the vertical center of my navbar, in a table i could just use valign="middle"! As regards using "line height" i don't have anything to align it with. I think in my example i have tried to use it with inline elements or have i?

Link to comment
Share on other sites

Well, giving the text in a span or link or whatever line height equal to the height of its container will center it vertically.

Link to comment
Share on other sites

So it does! THANKS!!!! Seriously THANKS for taking the time to help.
No problem - if only all of life's problems were as easily fixed :)
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...