问题

我有一个div标签,其中包含文本,我想将该div的内容垂直居中.

这里是我的div风格:

#box
{
  height: 90px;
  width: 270px;
  background: #000;
  font-size: 48px;
  font-style: oblique;
  color: #FFF;
  text-align: center;
  margin-top: 20px;
  margin-left: 5px;
}
<div Id="box">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>

这是最好的方法是什么?



解决方法

您可以尝试这种基本方法:

div {
  height: 90px;
  line-height: 90px;

  text-align: center;
  border: 2px dashed #f69c55;
}
<div>
  Hello World!
</div>

它只适用于单行文本,因为我们将行的高度设置为与包含框元素相同的高度.


A more versatile approach

这是另一种垂直对齐文本的方法.此解决方案适用于单行和多行文本,但仍需要一个固定高度的容器:

div {
  height: 200px;
  line-height: 200px;

  text-align: center;
  border: 2px dashed #f69c55;
}
span {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}
<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Haec et tu ita posuisti, et verba vestra sunt. Non enim iam stirpis bonum quaeret, sed animalis. </span>
</div>

CSS只是大小为&lt; div&gt; ,纵向中心通过设置&lt; div&gt; s行高等于其高度,并使&lt; span&gt; 具有 vertical-align:middle 的inline-block.然后,它将&lt; code&gt; 的行高设置为正常,因此其内容将在块内自然流动.


Simulating table display

这是另一个选项,可能不适用于不支持 display:table 的旧版浏览器 display:table-cell (基本上就是Internet Explorer 7). HTML与第二个示例相同:

div {
  display: table;
  height: 100px;
  width: 100%;
  text-align: center;
  border: 2px dashed #f69c55;
}
span {
  display: table-cell;
  vertical-align: middle;
}
<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>

使用CSS我们'模拟'表格显示行为,因为表格支持垂直对齐:

div {
  display: table;
  width: 250px;
  height: 100px;
  text-align: center;
}

span {
  display: table-cell;
  vertical-align: middle;
}

Using absolute positioning

此技术使用绝对定位的元素设置顶部,底部,左侧和右侧为0.它在Smashing Magazine中的一篇文章中有更详细的描述, CSS中的绝对水平和垂直居中




相关问题推荐