vertical-align:middle 让文字垂直居中

最新推荐文章于 2024-05-08 11:38:43 发布

原创最新推荐文章于 2024-05-08 11:38:43 发布 · 1.1k 阅读

1 ·

CC 4.0 BY-SA版权

css 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一种使用CSS实现文本在div容器内垂直居中的方法。通过将父元素的font-size设置为0，并在子元素inline-block元素中设置指定的font-size，可以有效地解决垂直居中问题。

<!DOCTYPE html>
<style>
div {
  border:1px solid red;
  width:200px;
  height:100px;
  text-align:center;
  font-size:0px;
}
div:before{
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
span {
  vertical-align:middle;
  display:inline-block;
  font-size:14px;
}
#box {
  width:100px;
  height:98px;
  background:#EEE;
}
</style>
<div>
  <span>abc</span><span>def</span>
</div>

这里有个gug