如何文字垂直水平居中，使用vertical-align。

最新推荐文章于 2022-06-19 15:16:06 发布

AILIHEIHEI

最新推荐文章于 2022-06-19 15:16:06 发布

阅读量1.5k

点赞数

文章标签： vertical-alig 垂直水平居居

本文链接：https://blog.csdn.net/qq_42780323/article/details/82818842

版权

今天实验了一下使用vertical-align来进行文字垂直方向的居中，先对目标内容进行设置display：table-cell.单行文本和多行文本都可以。2。以前单行文本可以直接使用： line-height=盒子高度。来达到垂直方向的居中。具体简单代码如下。

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>实验一下垂直居中</title>
<style>
       .box{width:800px;
                   height:400px;
                   background:red;
                   border:2px solid blue;
                   text-align:center;
                   display:table-cell;
                   vertical-align:middle;}
       .box1{width:800px;
                   height:400px;
                   background:blue;
                   border:2px solid yellow;
                   text-align:center;
                   display:table-cell;
                   vertical-align:middle;}

</style>

</head>
<body>
<div class="box" >
今天的天气不错哦
</div>
<div class="box1">
<p>p里面的内容哦</p>
</div>
</body>
</html>

AILIHEIHEI

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
如何文字垂直水平居中，使用vertical-align。

今天实验了一下使用vertical-align来进行文字垂直方向的居中，先对目标内容进行设置display：table-cell.单行文本和多行文本都可以。2。以前单行文本可以直接使用： line-height=盒子高度。来达到垂直方向的居中。具体简单代码如下。&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head lang="en"&gt; &lt;met...
复制链接

扫一扫