多行文本固定高度垂直居中

 

　　

单行文本垂直居中就是用line-height:框高;

 

多行文本不固定高度垂直居中直接加一个padding就可以

 

多行文本固定高度看下面代码

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .mulit_line{
            height: 150px;
            /* 其实高度并没有发挥作用，框的高度其实是由行高撑开的， */
            line-height:150px; 
            border:1px dashed #cccccc;
            text-align: center;
            /*padding-left:5px;*/
        }
        .mulit_line span{
            
            display:inline-block; 
            line-height:1.4em; 
            vertical-align:middle;
        }

    </style>
</head>
<body>
    <p class="mulit_line">
        <span style="font-size:12px;">
            原来一生一世那么短暂，原来当你发现所爱的，就应该不顾一切的去追求。<br>
            因为生命随时都会终止，命运是大海，当你能够畅游时，你就要尽情游向你的所爱，<br>
            因为你不知道狂流什么时候会到来，卷走一切希望与梦想。
        </span>
    </p>
</body>
</html>

 

posted @ 2016-07-26 14:12  凉月-天  阅读(305)  评论(0)  编辑  收藏  举报