css - h3中的文字居中高度

Question

所以我有一个h3

<h3>someText<h3>

具有h3高度和背景图像

h3
{
height:30px;
background-image:url();
background-reat: repeat-x;
}

现在我希望中的文本h3与元素的中间对齐，但它总是将文本浮动到顶部：在此处输入图像描述

我怎样才能做到这一点？

score 8 · Accepted Answer

设置line-height匹配height：

h3
{
height:30px;
line-height:30px;
background-image:url();
background-reat: repeat-x;
}

score 3 · Accepted Answer

如果您的<h3>元素包含多行文本，则设置该line-height属性将无法按照其他答案的建议进行。

如果您不必支持lteIE7，则可以display: table-cell与属性结合使用vertical-align：

h3 {
  background-color: whitesmoke;
  height: 100px;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

score 2 · Accepted Answer

2

您可以简单地添加line-height:30px;

于 2013-02-21T17:14:41.460 回答

score 1 · Accepted Answer

用来line-height解决这个

h3 {
    height:30px;
    background-image:url();
    background-reat: repeat-x;
    line-height: 30px;
}

score 0 · Accepted Answer

h3 {
    ...
    /* those 2 lines are what you need */
    line-height:30px;
    vertical-align:middle;
    ...
}

5 回答 5