zoukankan      html  css  js  c++  java
  • 使用vertical-align实现垂直对齐

    关于垂直对齐,之前研究过好几次了,但感觉每次都没研究透彻,做了几个效果,就觉得自己掌握了,实在是自欺欺人。真乃搞技术的大忌。

    这两天又下定决心重新开始研究vertical-allign这个高深莫测的属性了,决定一举攻破城池。但由于这个属性牵扯到的东西实在太多,line-height、盒模型等,都是css中的难点。所以要彻底掌握要花好些时间了。

    使用table-cell实现垂直对齐:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style type="text/css">
            div{
                display: table-cell;
                height: 10em;
                border: 1px solid #ccc;
                vertical-align: middle;
            }
            span{
                display: inline-block;
                vertical-align: middle;
            }
        </style>
    </head>
    <body>
        <div>
            <span>这是一个关于多行文字的垂直居中<br>这是第二行</span>
        </div>
    </body>
    </html>

    使用after伪元素实现对齐:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style type="text/css">
            html,body,.box{
                margin: 0;
                height: 100%;
            }
    
            .box{
                width: 100vw;
                height: 100vh;
                text-align: center;
                background-color: rgba(0,0,0,.3);
            }
            .box:after{
                content: '';
                display: inline-block;
                width: 0;
                height: 100%;
                vertical-align: middle
            }
            img{
                vertical-align: middle
            }
        </style>
    </head>
    <body>
        <div class="box">
            <img src="img/1.jpg">
        </div>
    </body>
    </html>
  • 相关阅读:
    Linux大文件传输(转)
    SSH登录很慢问题的解决
    tcp-ip-状态详解(转)
    shell下root用户切换其他用户运行程序
    Linux进程内存分析pmap命令(转)
    svn在linux下的使用(转)
    双重检查锁定及单例模式(转)
    深入分析Volatile的实现原理(转)
    JMM & synchronized概述(转)
    性能测试工具Locust
  • 原文地址:https://www.cnblogs.com/11lang/p/7465057.html
Copyright © 2011-2022 走看看