Padraic Posted October 4, 2009 Report Share Posted October 4, 2009 (edited) 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 October 4, 2009 by Padraic Link to comment Share on other sites More sharing options...
chibineku Posted October 4, 2009 Report Share Posted October 4, 2009 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 More sharing options...
Ingolme Posted October 4, 2009 Report Share Posted October 4, 2009 The vertical-align property only works properly on images and items that are displayed as inline-blocks. Link to comment Share on other sites More sharing options...
Padraic Posted October 4, 2009 Author Report Share Posted October 4, 2009 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 More sharing options...
chibineku Posted October 4, 2009 Report Share Posted October 4, 2009 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 More sharing options...
Padraic Posted October 4, 2009 Author Report Share Posted October 4, 2009 Well, giving the text in a span or link or whatever line height equal to the height of its container will center it vertically.So it does! THANKS!!!! Seriously THANKS for taking the time to help. Link to comment Share on other sites More sharing options...
chibineku Posted October 4, 2009 Report Share Posted October 4, 2009 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now