h3中心文本高度

Question

所以我有一个h3

<h3>someText<h3>

h3有一个高度和一个背景图片

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

现在我希望h3中的文本与元素的中间对齐，但它总是将文本浮动到顶部：

我怎么能做到这一点？

Answer 1

将line-height设置为与height匹配：

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

Answer 2

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

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

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

Answer 3

您只需添加line-height:30px;

即可

Answer 4

使用line-height解决此问题

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

Answer 5

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