天天看点
返回

一行或者两行都上下居中显示【文字垂直居中显示】文字垂直居中显示

.rtips p{ position:absolute;  height:50px; vertical-align:middle; top:0px; left:15%; width:100%;  line-height:22px; font-weight:normal; overflow:hidden;
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: left;
        justify-content: left;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
}      
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <style>
        .rtips{ width: 500px; height: 100px; border: red 1px solid;}
        .rtips p{ position:absolute; 
            width: 100px;  height:50px; 
            vertical-align:middle; 
             font-weight:normal; overflow:hidden;
                display: -webkit-box;
                display: -ms-flexbox;
                display: -webkit-flex;
                display: flex;
                -webkit-box-pack: center;
                -ms-flex-pack: center;
                -webkit-justify-content: left;
                justify-content: left;
                -webkit-box-align: center;
                -ms-flex-align: center;
                -webkit-align-items: center;
                align-items: center;
        }



    </style>


    <div class="rtips">
    
        <p>的腹股沟</p>
        
    </div>
<div class="rtips">
    
        <p>胜利大街菲利克斯剪短发</p>
        
    </div>

    
</body>
</html>

给心灵一个纯净空间，让思想，情感，飞扬！

文字垂直居中 垂直居中 居中 垂直 文字
上一篇: Python使用Mysql官方驱动(取出dict类型的数据)
下一篇: CSS 如何让li横向在div居中显示，li居中显示。

继续阅读