zoukankan      html  css  js  c++  java
  • 水平和垂直居中

    水平居中

    行内元素:给父元素添加 text-align: center;(文本 / 图片)

    块级元素:

      确定宽度:margin: 0 auto;

      不确定宽度: 1. 把块级元素变成行内元素, display:inline-block; text-align:center;

             2. 给父元素设置浮动和相对定位及left: 50%; 子元素相对定位及left: 50%; 

             3. table{margin: 0 auto;}

    垂直居中

    父级高度确定

      单行文本:line-height: height;

      多行文本、图片: 1. vertical-align:middle; (只有父级元素为td/th,或者图片) <IE8+>

              2. father{display:table;} child{display:table-cell;vertical-align:middle} 用table-cell 来激活 vertical-align;eg:多行文字的水平垂直居中

    多行文字的水平垂直居中

    <style>
            .multiLineWordContainer{
                display: table-cell;
                border: 4px solid #beceeb;
                height: 300px;
                vertical-align: middle;
            }
        </style>
    </head>
    <body>
      <div class="multiLineWordContainer">
            这里的文字用来做多行文字垂直居中对齐的测试。<br>
            这是第二行文字,您还可以再添加一行文字做测试!<br>
            这是第3行文字,您还可以再添加一行文字做测试!<br>
            这是第4行文字,您还可以再添加一行文字做测试!
      </div>
    </body>

    大小不固定的图片

    <style>
            ul,li{
                list-style: none;
                margin:0;
                padding:0;
            }
            ul{
                margin-top:10px;
            }
            li{
                height:128px;
                width:150px;
                padding:13px 0;
                float:left;
                margin-right:10px;
                border:1px solid #beceeb;
                text-align:center;
                font-size:0;
            }
    //方式一
            .invisibilityImg{
                height:100%;
                width:1px;
                vertical-align:middle;
            }
            .showImg{
                vertical-align:middle;
            }
    //方式二
            .ulImage li{
                height: 150px;
                text-align: center;
                line-height: 150px;
            }
            .ulImage li img{
                vertical-align:middle;
            }
        </style>
    </head>
    <body>
    <ul class="imgContainer">
        <li>
            <img class="showImg" src="image/mm1.jpg" />
            <img class="invisibilityImg" src="image/pixel.gif"/>
        </li>
        <li>
            <img class="showImg" src="image/mm2.jpg" />
            <img class="invisibilityImg" src="image/pixel.gif"/>
        </li>
        <li>
            <img class="showImg" src="image/mm3.jpg" />
            <img class="invisibilityImg" src="image/pixel.gif"/>
        </li>
    </ul>
    
    <ul class="ulImage">
        <li><img src="image/mm1.jpg" /></li>
        <li><img src="image/mm2.jpg" /></li>
        <li><img src="image/mm3.jpg" /></li>
    </ul>
    </body>
    </html>

    参照:http://www.zhangxinxu.com/wordpress/?p=61

  • 相关阅读:
    案例分享:只因在 update 语句中误用一个双引号,生产数据竟然都变成了 0
    快速了解Service Mesh微服务架构实现服务间gRPC通信
    实战|如何优雅地自定义Prometheus监控指标
    微服务架构中如何快速构建一个数据报告服务?
    k8s微服务接入SkyWalking,三分钟教你怎么玩!
    Python基础-27-面向对象
    Python基础-21-字典
    Jmeter JSON提取器
    Jmeter正则表达式提取器
    访问github,修改host文件
  • 原文地址:https://www.cnblogs.com/mina-huojian66/p/6114514.html
Copyright © 2011-2022 走看看