多行文本未知高度垂直居中-

最新推荐文章于 2022-01-17 18:03:34 发布

阿聪世家

最新推荐文章于 2022-01-17 18:03:34 发布

阅读量1.1k

点赞数

分类专栏： html5/css3 文章标签： css3 CSS web前端开发

本文链接：https://blog.csdn.net/congcong875/article/details/50803355

版权

html5/css3 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>多行文本未知高度垂直居中-by一丝</title>
</head>
<body>
 <body>
<div class="box">
  
<p class="text">
多行文本未知高度垂直居中-by 一丝多行文本未知高度垂直居中-by 一丝多行文本未知高度垂直居中-by 一丝
</p>
  
</div>
</body>
</html>

*{margin:0;padding:0;}

.box{
  height:200px;
  width:300px;
  background:pink;
  margin:30px auto;
}
.box:before{
  content: '我是那个备胎元素';
  display: inline-block;
  vertical-align: middle;
  width: 1em;
  height: 100%;
  background:lightblue;
}
.text{
  display: inline-block;
  font-size:16px;
  vertical-align: middle;/* 保证文字垂直居中 */
}

阿聪世家

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
多行文本未知高度垂直居中-

多行文本未知高度垂直居中-by一丝多行文本未知高度垂直居中-by 一丝多行文本未知高度垂直居中-by 一丝多行文本未知高度垂直居中-by 一丝 *{margin:0;padding:0;}.box{ height:200px; width:300px; background:pink; margin:30px auto;}.box
复制链接

扫一扫

专栏目录