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>
    只有足够努力,才能看起来毫不费力
  • 相关阅读:
    Linux 命令后台运行
    Linux Mint,Ubuntu 18 ,Deepin15.7 安装mysql 没有提示输入密码,修改root用户密码过程
    爬虫第一篇基本库的使用——urllib
    Python开发第五篇
    php 5.6 安装openssl extension 出现编译错误
    bash 中的变量可以这么用
    查表法现实数学函数
    封装boto3 api用于服务器端与AWS S3交互
    python 打包详解
    Python使用boto3操作AWS S3中踩过的坑
  • 原文地址:https://www.cnblogs.com/codelovers/p/4399664.html
Copyright © 2011-2022 走看看