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

supertree_l

于 2018-09-25 14:18:42 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏： css

本文链接：https://blog.youkuaiyun.com/supertree_l/article/details/82838734

css 专栏收录该内容

7 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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