美文网首页
容器内文字(多行)垂直居中

容器内文字(多行)垂直居中

作者: 两年半练习程序员 | 来源:发表于2020-07-01 11:08 被阅读0次

    相关属性

    display: table-cell;
    vertical-align: middle;
    

    效果

    image.png

    代码

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <style>
        .container {
            height: 200px;
            width: 200px;
            display: table-cell;
            vertical-align: middle;
            background: #eee;
        }
    </style>
    
    <body>
        <div class="container">端午节刚过,你吃了什么口味的粽子?你是甜粽党还是咸粽党?点击#喂,你在偷吃粽子吗马上加入话题热议。</div>
    </body>
    
    </html>
    

    相关文章

      网友评论

          本文标题:容器内文字(多行)垂直居中

          本文链接:https://www.haomeiwen.com/subject/mvrcqktx.html