如何在固定高度的中心垂直对齐文本？

Question

I have an image of height=79px and width=138px and I want to align the text vertically center through <li> . For this, I write my css as :

#left-container .col1 li
{
    background:url(../images/button.png) no-repeat top center;
    height:79px;
    line-height:79px;
    font-weight:bold;
    font-size:1.5625em; /* 25px */
    text-align:center;
    text-transform:uppercase;
    margin-bottom:1px;
    position:relative;  
}

This is okay with single word, eg Qty. , but not with 2 words, eg Item Options , Hold Selected , etc.

So, can you please suggest whether I should create separate classes for each button to adjust line heights separately, or is there any other unified way to adjust all the line heights in just one class?

Answer 1

If you set the line-height property to 79px, each line of text will be 79px height.

To vertical center a text inside an element, you have to use the vertical-align property, together with the display:table property for the container element. The idea is to make the element work like a table.

So you need a container element acting like a table, an inner element acting like a table-row, and inside that, elements acting like table cells.

I managed to let your .col1 acting like a table:

#left-container .col1 {
    display:table;
}

Then your ul acting like table rows:

#left-container .col1 ul {
    display:table-row;

}

And then each li item acting like a table cell, adding this CSS to yours:

#left-container .col1 li  {  
    display:table-cell;
    vertical-align:middle; 
}

I removed the line-height property.

Note that you need now to have multiple ul for each row you want to have in the "table", so if you want to have the same structure as before, you need to have something like this:

<div id="left-container">
    <div class="col1">
        <ul>
            <li>List item 1 </li>
        </ul>
        <ul>
            <li>List item 2 </li>
        </ul>
        <ul>
            <li>List item 3 </li>
        </ul>
        <ul>
            <li>List item 4 </li>
        </ul>
        <ul>
            <li>List item 5 </li>
        </ul>
    </div>
</div>

UPDATE

Look at it here: http://jsfiddle.net/W2H6a/22/

Answer 2

try this:

HTML

<div id="left-container">
    <div class="col1">
        <ul>
        <li>List item 1 </li>
        <li>List item 2 </li>
        <li>List item 3 </li>
        <li>List item 4 </li>
        <li>List item 5 </li>
        </ul>
    </div>
</div>

CSS:

#left-container .col1 li  { 
    height:79px; 
    width:138px;
    line-height: 70px;
    font-weight:bold;   
    text-align:center;
    text-transform:uppercase;
    margin-bottom:1px;   
    border: 1px solid green;  /* Just to check */
 }

See the demo here: http://jsfiddle.net/W2H6a/3/