Question

我正在尝试使用line-height在几个容器中垂直对齐文本，但它无法正常工作。我以前从来没有遇到过任何问题，但由于某种原因它现在不能正常排队。

现在，我可能只是对所有编码都视而不见，但我似乎无法找到问题所在......

这就是我的HTML的样子：

<div class="formLabel">
    <div class="labelNumber">D</div>
    <div class="labelTitle">
        <h2>New Password</h2>
        <p>Check Help for character and length restrictions</p>
    </div>
</div>

这就是我的CSS的样子：

.formLabel
{
    position: relative;
    width: 400px;
    height: 40px;
    padding: 20px 0px 0px 10px;
    margin: 0;
}

.labelNumber
{
    float: left;
    width: 30px;
    height: 30px;
    line-height: 30px;
    background: #191919;
    font: bold 18px Arial;
    color: #555555;
    text-align: center;
    padding: 0;
    margin: 0;
}

我试图垂直对齐.labelNumber容器中的字符。

Answer 1

line-height属性是速记font语法的一部分，因此请在其后面加上行高或将其集成到font属性中。

.labelNumber {
  float: left;
  width: 30px;
  height: 30px;
  background: #191919;
  font: bold 18px/30px Arial; /** Font-size / Line-height */
  color: #fff;
  text-align: center;
  padding: 0;
  margin: 0;
}

基本上，font属性覆盖了行高。

Answer 2

您当前代码的问题在于CSS声明的顺序是强制浏览器忘记line-height: 30px;声明，因为在它之后您正在使用font简写语法{ {1}}。

您可以使用以下两个选项之一解决您的问题：

将font: bold 18px Arial;移至line-height: 30px;：
之后
请参阅此working Fiddle示例。
```
font: bold 18px Arial;
```
放宽.labelNumber { position: absolute; width: 30px; height: 30px; background: #191919; font: bold 18px Arial; line-height: 30px; color: #555555; text-align: center; padding: 0; margin: 0; }并将line-height: 30px;简写更新为font：

请参阅此working Fiddle示例。
```
font: bold 18px/30px Arial;
```

您可以阅读.labelNumber { position: absolute; width: 30px; height: 30px; background: #191919; font: bold 18px/30px Arial; color: #555555; text-align: center; padding: 0; margin: 0; }简写语法here。

作为附注：为了减少代码，第二个选项是首选选项。

无法垂直对齐容器内的文本

2 个答案: