如何垂直居中文字

Question

我希望文本在框中垂直居中。我不想使用padding-top，因为它对于每个长度的文本都不正确。我在此处发布了一个示例：http://jsfiddle.net/55Ruh/23/

Answer 1

您可以像这样使用表格属性 vertical-align （在您的示例中）：

html：

<div class="bg_class">
  <div class="bg_class_inner">
    My text goes here...My text goes here...My text goes here...
    My text goes here...My text goes here...My text goes here...
    My text goes here...My text goes here...My text goes here...
    My text goes here...My text goes here...
  </div>
</div>

css：

.bg_class
{
  background: green;
  width: 300px;
  height: 200px;
  text-align: center;
  margin: 0 auto;
  display: table; 
}
.bg_class_inner
{
  display: table-cell;
  text-align: center;
  vertical-align: middle
}