Vertical aligning text in a paragraph

[shanemurfy]

Hi,

I am trying to create a navigation where the navigation list items are simply circles created using CSS. WHen I created the circular backgrounds to the list items how do I get the text of the list item to vertically align centre?

The HTML is thus:

• The Music
• The Book
• The News
• The Videos
• The Photos

The CSS I have used is the following:

#navlist
{
width:90px;
display:inline;
float: left;
list-style: none;
margin: 40px 0px;
padding: 0;
}

#navlist a

{
display: block;
width: 90px;
height: 90px;
margin-bottom: 10px;
padding: 0px;
background:#333;
-moz-border-radius: 45px;
-webkit-border-radius: 45px;
text-decoration:none;
color:#FFF;
font-family: ‘Chelsea Market’, cursive;
font-size:16px;
vertical-align: center;
text-align:center;

}

If you render this in the browser you will notice that the text for the list item is aligned to the top of the circle which obviously is crap. I have tried adding padding to move the text to the center but this then ruins the circle.

Any help would be mucho appreciado

Shane

[Paulie_D]

Try adding

line-height:90px;

to your link css.

Basically it’s tells the browser to render the text in the middle of your box that’s 90px wide/tall.

See? http://jsfiddle.net/Paulie_D/3nz6x/1/

[shanemurfy]

BRILLIANT!!! That works. Thanks so much. I am pretty new to this :)

[Author]

Posts