关于多行文本的垂直居中
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了关于多行文本的垂直居中相关的知识，希望对你有一定的参考价值。
在页面里 文本时必不可少的部分 一般我们做水平居中的时候只需设置
text-align:center;
单行文本的垂直居中直接是行高等于父元素的高度即可 那么当我们做多行文本的垂直居中时 一般是怎么做呢？
一 把文字用块级元素包起来 并设置vertical-align
代码如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>多行文本的居中对齐</title> <style type="text/css"> *{margin:0;padding: 0;} .out{width: 600px;height:300px;border:1px solid blue;margin:100px auto;display: table-cell;-vertical-align: middle;text-align: center;line-height: 300px;font-size:0;padding:10px;} strong{color:red;cursor:pointer;} .in{display: inline-block;line-height: 16px;vertical-align: middle;font-size: 16px;border:1px solid black;} </style> </head> <body> <div class="out"> <div class="in"> 多行文字垂直居中对齐的测试 <strong>添加</strong> <br>多行文字垂直居中对齐的测试 <br>xxXXXXXXXxx<br>这里<br>这里 </div>XXX </div> <script type="text/javascript"> document.querySelector(".out").onclick=function() { document.querySelector(".in").innerHTML=document.querySelector(".in").innerHTML+‘添加内容！！‘+‘<br>‘; } </script> </body> </html>
要把里面的div设为内联 这样就可以正好包住整个文本而不会独占一行 而vertical-align:middle则是在垂直方向上水平 而当最外层元素设置display：table-cell时 内部元素会水平和垂直居中，而父元素设置font-size:0是解决代码换行解析问题。
二 利用before伪类撑开父元素并设置vertical-align 从而实现垂直居中
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8" /> <title>多行文本的垂直居中</title> <style type="text/css"> *{margin: 0;padding: 0;} .box{height: 200px;width: 300px;background: pink;margin: 30px auto;font-size: 0;} .box:before{content: ‘我是撑开父元素的那个元素‘;display: inline-block;vertical-align:middle;width: 0;height: 100%;} .text{display: inline-block;font-size: 16px;vertical-align: middle;/* 保证文字会垂直居中 */} </style> </head> <body> <div class="box"> <p class="text"> 多行文本垂直居中 多行文本垂直居中 多行文本垂直居中 多行文本垂直居中 多行文本垂直居中 多行文本垂直居中 多行文本垂直居中 </p> </div> </body> </html>
利用在父元素上设置before伪类撑开父元素，并将before伪类和文本都设置vertical-align：midddle；实现垂直居中 当然 要把文本设置为内联块 对内联元素设置vertical-align是没有效果的
建议使用第二种 代码更加简洁 而且比较容易理解 不需要在外层套div
第一次写博客 虽然很早就注册了 但总是看别人写 感觉自己以后要多写多看多想 加油！
以上是关于关于多行文本的垂直居中的主要内容，如果未能解决你的问题，请参考以下文章
web前端技巧-文本如何垂直居中？多行文本如何实现上下居中？