利用CSS实现文本垂直居中(在固定高度的容器中)
by 毛三胖 on 2018年01月18日
阅:403赞:11

CSS代码

#box {
    height: 120px;
    line-height: 120px;
    text-align: center;
    border: 2px dashed #f69c55;
 }

上述代码只适用于单行文本的垂直居中,我们通过将line-height设置为与包含框元素相同的高度从而实现文本的垂直居中。

演示

一种更通用的方法

这是一种更通用的实现文本垂直居中方法。 此方法适用于单行和多行文本,但它仍然需要一个固定高度的容器。

#box {
  height: 120px;
  line-height: 120px;
  text-align: center;
  border: 2px dashed #f69c55;
}
span {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}

利用表布局

这是另一种方法,但是在不支持display:table和display:table-cell(基本上只是Internet Explorer 7)的旧浏览器上可能不起作用。这里我们利用了表支持垂直具中的特性。

#box {
  display: table;
  height: 120px;
  width: 100%;
  text-align: center;
  border: 2px dashed #f69c55;
}
span {
  display: table-cell;
  vertical-align: middle;
}

原文链接

stackoverflow.com

CSS
$ 热门标签
$ 贴士
简单是稳定的前提。 -Edsger Dijkstra
$ 声明
本站所有代码及文字都是作者精心汇编整理而成,转载代码及文字请明确注明出处和作者名称。