刘家姥姥

人间的真话本来就不多,一个女子的脸红胜过一大段长话。

水平居中

  1. 行内元素

    如果被设置的元素是文字、图片等行内元素,水平居中是通过给父元素设置text-align:center;

    (1)文本居中

    h1{text-align:center;}

    <h1>了不起的盖茨比</h1>

    (2)图片居中

    div{text-align:center;}

    <div><img src="http://img.mukewang.com/52b4113500018cf102000200.jpg" ></div>

    若无div,img{text-align:center;}是无法实现居中效果的。

    ps:

    text-align可能的值:left、right、center、justify、inherit。

    text-align属性所有浏览器都支持,但IE不支持inherit。
  2. 定宽块状元素

    满足“定宽”“块状”两个条件的元素通过设置左右margin为auto。

    div{
        border:1px solid red;
        width:500px;
        margin:auto;
    }


    <div>我是定宽块状元素,哈哈,我要水平居中显示。</div>

  3. 不定宽块状元素

    比如说分页导航,不知页数,不能限制宽度,方法主要有三种。

    (1)加入table标签

    table{margin:0 auto;}


    <table>
    <tr>
        <td>
            <div class="wrap">设置我所在的div容器水平居中</div>
        </td>
    </tr>
    </table>

    (2)改变块状元素的display为inline,然后使用text-align:center;

    这种方法的bug是,当元素变为inline,就无法设置宽高之类的属性。

    (3)通过给父元素设置float,position:relative;left:50%;子元素设置position:relative;left:-50%;

    示例如下:

    .wrap{float:left;position:relative;left:50%;}
    .wrap-center{
        background:#ccc;
        position:relative;
        left:-50%;
    }


    <div class="wrap">
        <div class="wrap-center">我们来学习一下这种方法。</div>
    </div>

评论
©刘家姥姥 | Powered by LOFTER