1

我正在尝试使用 垂直对齐几个容器中的文本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这是我试图垂直对齐的容器中的字符。

4

2 回答 2

4

line-height 属性是简写font语法的一部分，因此将 line-height 放在它之后或将其集成到 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;
}

基本上字体属性覆盖了行高。

于 2012-07-06T23:03:49.333 回答
3

您当前代码的问题是您的 CSS 声明的顺序迫使浏览器忘记line-height: 30px;声明，因为在它之后您使用的是font简写语法font: bold 18px Arial;。

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

  • 将line-height: 30px;to 移到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;更新为：fontfont: 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;
}

您可以在此处阅读有关font速记语法的信息。

附带说明：为了减少代码，第二个选项是首选。

于 2012-07-06T23:13:22.463 回答