如何让div内的div层水平居中

0 投票
最新提问 1月 7, 2017 用户: 雨杰 (240 分)

我如何控制内层的div水平居中,内层的css怎么写?

外边的div设置了width:100%:

<div id="outer" style="width:100%">  
  <div id="inner">Foo</div>
</div>

    1个回答

    0 投票
    最新回答 1月 7, 2017 用户: 宁静致远 (340 分)

    内部div可以用此CSS:

    #inner {
        width: 60%;
        margin: 0 auto; 
    }
    

    当然,宽度可以随意设置,这里为60%。任何宽度小于包含div的都能正常显示。最后一行margin: 0 auto的含义是上边距为0,左右边距自动设置,这时内层即在外层中间。

    如果您指定的是IE8 +,最好改为:

    #inner {
        display: table;
        margin: 0 auto;
    }
    

    它将使内部元素居中水平,当内容为动态时内层无需提前设置特定的宽度。在IE中,最好添加<!DOCTYPE>标签以确保能正确显示。

    如果你不希望设置一个固定宽度的内部div,你还可以这样写:

    #outer {
      width: 100%;
      text-align: center;
    }
    
    #inner {
      display: inline-block;
    }
    

    使得该内div层可以与外层居中对齐。

     

    欢迎来到编程助手,编程方面有什么不懂的问题可以尽管在这里提问,你将会收到热心爱好者的回答。
    ...