vertical-align 垂直居中实践

痛定思痛。 2023-05-30 06:29 21阅读 0赞

大概实现效果如图![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppc2hhbndhbmc_size_16_color_FFFFFF_t_70][]

## 实现代码 ##

### 方式1 ###

> 父元素：line-height    子元素 ：vertical-align

<!DOCTYPE html>
    <html lang="zh-cmn-Hans">
    <head>
    <meta charset="utf-8" />
    <title>垂直居中练习</title>
    <meta name="author" content="" />
    <style>
        .content{
            width: 600px;
            height: 50px;
            border: 1px solid #000;
            margin: 0 auto;
            font-size: 0;
            line-height: 50px;
            margin-top: 200px;
        }
        .content a{
            display: inline-block;
            width: 25%;
            height: 40px;
            background: cadetblue;
            font-size: 16px;
            text-align: center;
            vertical-align: middle;
            text-decoration: none;
            line-height: 40px;
        }
    </style>
    </head>
    <body>
        <div class="content">
            <a>测试1</a>
            <a>测试2</a>
            <a>测试3</a>
            <a>测试4</a>
        </div>
    </body>
    </html>

### 方式2 ###

> 添加元素调整基准线

<!DOCTYPE html>
    <html lang="zh-cmn-Hans">
    <head>
    <meta charset="utf-8" />
    <title>垂直居中练习</title>
    <meta name="author" content="" />
    <style>
        .content{
            width: 600px;
            height: 50px;
            border: 1px solid #000;
            margin: 0 auto;
            font-size: 0;
            margin-top: 200px;
        }
        .content a{
            display: inline-block;
            width: 25%;
            height: 40px;
            background: cadetblue;
            font-size: 16px;
            text-align: center;
            vertical-align: middle;
            text-decoration: none;
            line-height: 40px;
        }
    
        .content span{
            display: inline-block;
            height: 50px;
            vertical-align: middle;
        }
    </style>
    </head>
    <body>
        <div class="content">
            <a>测试1</a>
            <a>测试2</a>
            <a>测试3</a>
            <a>测试4</a>
            <span>x</span>
        </div>
    </body>
    </html>

### 方式3 ###

> 伪元素 调整基线

<!DOCTYPE html>
    <html lang="zh-cmn-Hans">
    <head>
    <meta charset="utf-8" />
    <title>垂直居中练习</title>
    <meta name="author" content="" />
    <style>
        .content{
            width: 600px;
            height: 50px;
            border: 1px solid #000;
            margin: 0 auto;
            font-size: 0;
            margin-top: 200px;
        }
        .content a{
            display: inline-block;
            width: 25%;
            height: 40px;
            background: cadetblue;
            font-size: 16px;
            text-align: center;
            vertical-align: middle;
            text-decoration: none;
            line-height: 40px;
        }
        .content::after{
            content: 'x';
            display: inline-block;
            height: 50px;
            vertical-align: middle;
        }
    </style>
    </head>
    <body>
        <div class="content">
            <a>测试1</a>
            <a>测试2</a>
            <a>测试3</a>
            <a>测试4</a>
        </div>
    </body>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppc2hhbndhbmc_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191108103546621.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppc2hhbndhbmc=,size_16,color_FFFFFF,t_70