Padraic Posted October 4, 2009 Share Posted October 4, 2009 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;} Link to comment Share on other sites More sharing options...
chibineku Posted October 4, 2009 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 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 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 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 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 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
Archived
This topic is now archived and is closed to further replies.