如何垂直居中文本

Question

我希望将文本垂直居中在一个盒子内。我不想使用 padding-top，因为它对于任意长度的文本都不正确。我在这里发布了一个示例：http://jsfiddle.net/55Ruh/23/

- good_evening

---

尝试使用这个：vertical-align:middle; - Faraz Kelhini

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>

样式表：

.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
}

- radonys

---

当我在bg_class中使用右浮动和左浮动时，似乎无法正常工作。 - good_evening

@hey：你会同时使用float: left;和margin: 0 auto;吗？ - radonys

.bg_class { background: green; width: 300px; height: 200px; text-align: center; display: table; float: left; } 这个代码可以正常工作，它将盒子放在了左侧...我不知道你想通过使用float来实现什么效果。 - radonys