zoukankan      html  css  js  c++  java
  • 【CSS基础】实现 div 里的内容垂直水平居中

     方案一: 所有内容垂直水平居中

      兼容性:IE8+。

         条件:内容宽度和高度可以未知,可以是多行文字、图片、div。

      描述:使用table-cell + vertical-align , html代码见文末。

            .centerDiv {
                width: 800px;
                height: 350px;
                background-color: #00b0f0;
                text-align: center;
                display: table-cell;
                vertical-align: middle;
            }

    方案二: 单行内容垂直水平居中

      兼容性:IE7+

      条件: 文字内容必须为单行

          描述: text-align: center水平居中, line-height 等于height 垂直居中

    方案三: 未知大小图片垂直水平居中

      兼容性:IE8+

      条件:内容为图片,文字不行。文字和图片组合时,图片能居中,文字不能。

      描述:父节点相对定位,图片绝对定位

            .centerDiv {
                width: 800px;
                height: 350px;
                background-color: #00b0f0;
                position: relative;
            }
    
            .centerDiv img {
                position: absolute;
                left: 0;top:0;right: 0;bottom: 0;
                margin: auto;
            }    

    方案四:已知宽高度div垂直水平居中

      兼容性:I5+

      条件:内容div高度宽度已知

      描述: 定位 + 负margin

            .centerDiv {
                width: 800px;
                height: 350px;
                background-color: #00b0f0;
                position: relative;
            }
    
            .centerDiv div {
                width: 500px;
                height: 300px;
                background-color: #00ee00;
                position: absolute;
                left: 50%; top: 50%;
                margin-left: -250px;
                margin-top: -150px;
            }

    附: html测试代码

         <div class="centerDiv">
            <p>hello, this a p tag.</p>
        </div><br>
    
        <div class="centerDiv">
            <img src="img/head.jpg">
        </div><br>
    
        <div class="centerDiv">
            <div>
                <p>qwe</p>
                <p>qwe</p>
                <p>qwe</p>
            </div>
        </div>
    只有足够努力,才能看起来毫不费力
  • 相关阅读:
    学习一波cmd
    青春,就是用來懷念的
    菜鸟的 linux 学习笔记 -- OOM
    python 获取本机 IP
    win8防火墙配置出站规则禁止QQ访问
    netsh配置Windows防火墙(advfirewall)
    TCP/IP协议
    TCP的状态 (SYN, FIN, ACK, PSH, RST, URG)
    Address already in use: AH00072: make_sock: could not bind to address 0.0.0.0:80
    Photoshop  cs6 快捷键命令大全
  • 原文地址:https://www.cnblogs.com/codelovers/p/4399664.html
Copyright © 2011-2022 走看看