如何让浮动后的多个盒子水平居中 您所在的位置:网站首页 html怎么居中盒子 如何让浮动后的多个盒子水平居中

如何让浮动后的多个盒子水平居中

#如何让浮动后的多个盒子水平居中| 来源: 网络整理| 查看: 265

    第一种,如果有固定的宽高。用一个和所有浮动盒子等宽的大盒子包裹起来,然后设置大盒子的margin:0 auto;就可以水平居中。需要注意大盒子的宽除了要包括里面盒子的总宽外还要包括每个盒子的外边距,内填充,边框等。还有大盒子里面所有元素浮动之后,大盒子的高度消失的问题。     第二种,使用绝对或相对定位。还是用一个大盒子包裹起来,大盒子的position设置成absolute或者relative,然后大盒子的left为50%,margin-left设置为负的大盒子宽度的一半,这也需要知道大盒子的宽度。     第三种,不需要设置任何宽度。所有盒子不使用浮动,而使用display:inline-block;来使盒子在一行显示,然后设置父元素的text-align:center;来使子元素居中。父元素需要占整个一行,并且每个盒子的html标签之间不能有空格或者换行,也就是必须紧挨着。这样的好处是,不用设置任何宽度,每个盒子可以自适应内容的宽度。



【本文地址】

公司简介

联系我们

今日新闻

    推荐新闻

    专题文章
      CopyRight 2018-2019 实验室设备网 版权所有