Question

我有一张height=79px和width=138px的图片，我希望将文字垂直对齐<li>。为此，我将我的CSS写成：

#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;  
}

单词可以，例如Qty.，但不是2个字，例如Item Options，Hold Selected等

那么，您能否建议我是否应该为每个按钮创建单独的类来分别调整行高，还是有其他统一的方法来调整一个类中的所有行高？

Answer 1

如果将line-height属性设置为79px，则每行文本的高度为79px。

要使元素内的文本垂直居中，必须使用vertical-align属性以及容器元素的display：table属性。我们的想法是让元素像桌子一样工作。

所以你需要一个像表一样的容器元素，一个像表行一样的内部元素，在里面，元素就像表格单元格一样。

我设法让你的.col1像桌子一样：

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

然后你的ul就像表行一样：

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

}

然后每个li项目就像一个表格单元格，将这个CSS添加到你的：

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

我删除了行高属性。

请注意，您现在需要为“table”中的每一行设置多个ul，因此如果您希望拥有与以前相同的结构，则需要具有以下内容：

<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>

的更新

在这里查看：http://jsfiddle.net/W2H6a/22/

Answer 2

试试这个：

<强> 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 */
 }

请参阅此处的演示： http://jsfiddle.net/W2H6a/3/

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

2 个答案:

的更新