Jump to content

Vertically center menu text


Recommended Posts

Same problem site as mentioned recently. THIS SITE.


I would like to more vertically align the text in the menu items at left. But note the two-line item towards the bottom of the list.


I suspect the only way to do that is to use "in-line styling", but I conveniently forgot how to do that since being beat about the head regarding how NOT to do that!




Thanks! Alfie

Link to comment
Share on other sites

You can just use padding instead of trying to declare a height on those <li>s. Like this:


div#nav ul li{

display: block;

width: 180px;

font: 10pt arial, helvetica, sans-serif;

font-weight: bold;

text-align: center;

background: transparent;

color: #fff;

border-top: 1px solid #630;



div#nav ul li a{

display: block;

width: 180px;

text-decoration: none;

color: #000;

padding: 10px 0;




And then at the top of your CSS, you'll need to either remove this or make it more specific with a class so that it won't affect the nav:


li {

text-align: left;

font: bold 12pt arial, sans-serif;

margin-bottom: 5px;

margin-right: 30px;



Those margins are messing up the nav when left as is.

Link to comment
Share on other sites

BTW, the "fix" works just a well with a padding of (much) less than 10px! I have now reduced it to padding: 4px 0; and everything centers up vertically and beautifully!


Tara-tarata-tata: - (Still doing that happy dance!)


Thanks Susie, one of the best answers I have received since "Billy Boy" spanked me for a silly interpretation of something!


I don't want to leave any of you guys and gals out of my kudos. You know who you are and you are all going to heaven!



Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...