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

最新推荐文章于 2022-01-05 09:13:45 发布

supertree_l

最新推荐文章于 2022-01-05 09:13:45 发布

阅读量1k

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/supertree_l/article/details/82838734

版权

css 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

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

解决方法

将父元素的 font-size 设置为0，然后在子元素 inline-block 元素中将 font-size 设置为指定的px就行了

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

supertree_l

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vertical-align:middle 让文字垂直居中

&lt;!DOCTYPE html&gt;&lt;style&gt;div { border:1px solid red; width:200px; height:100px; text-align:center; font-size:0px;}div:before{ content: ''; display: inline-block; he...
复制链接

扫一扫