zoukankan      html  css  js  c++  java
  • 关于文字垂直居中

    很多时候布局中需要文字垂直居中,有个CSS属性:vertical-align: middle;该属性在table里用是有效果的,很多块级元素没反应。
    这里有2个属性可以模拟table,来让vertical-align: middle属性生效。

    display: table和display: table-cell;

    很简单父级元素给固定宽高加上属性display: table,子级元素给属性display: table-cell和vertical-align: middle此时子集元素的文字自然垂直居中。

    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>display:table</title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            .main{
                display: table;
                width: 100px;
                height: 100px;
                border: 1px solid red;
            }
            .d1{
                display: table-cell;
                vertical-align: middle;
            }
            .d1 h3{
                text-align: center;
            }
        </style>
    </head>
    <body>
            <div class="main">
                <div class="d1">
                    <h3>垂直居中</h3>
                </div>
            </div>
    </body>
    </html>
  • 相关阅读:
    【leetcode】下一个排列
    【leetcode】配对交换
    【leetcode】两个相同字符之间的最长子字符串
    052-126&127
    052-125
    052-124
    052-123
    052-122
    052-121
    052-120
  • 原文地址:https://www.cnblogs.com/-walker/p/5757599.html
Copyright © 2011-2022 走看看