CODEWITHSUNDEEP
cssvertical-alignment
Navneet Saini
Navneet Saini

Reputation: 944

How do I vertically align the text to the middle using CSS?

Here is the fiddle link

Now, how to do I vertically align the text here so that it comes right in the middle of li element. I can do it by applying little paadding-top but in that case the top part of the li won't remain a link. Using display:table-cell, aligns all the li elements horizontally (which I don't want). So, what's the solution then?

Upvotes: 0

Views: 49

Answers (3)

Falguni Panchal
Falguni Panchal

Reputation: 8981

try this :

http://jsfiddle.net/ssF5K/3/

CSS :

.menuItems{
position: relative;
border-top: 1px solid #CCC;
vertical-align: middle;
height: 40px;
width: 85%;
padding: 0;
font-family: Geneva, 'Lucida Sans', 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif;
font-size: 1.2em;
font-weight: 500;
text-align: center;
    line-height:40px;
}

Upvotes: 0

Wilker Iceri
Wilker Iceri

Reputation: 487

Use line-height in .menuItems, with the same value of height, ex:

height: 40px;
line-height: 40px;

Upvotes: 0

Nitesh
Nitesh

Reputation: 15759

Here is the WORKING SOLUTION.

The Code:

.menuItems a {
    display: table-cell;
    height: inherit;
    vertical-align: middle;
    width: inherit;}

Upvotes: 2

Related Questions