有float:left后就不能居中的解决方案
在实际的网站建设过程中,有时使用了float:left就不能居中,很是困惑,由于元素是向左浮动,必须要使用这个float:left,下面讲解一下究竟怎样来使用才能居中,具体的解决方案如下:

还是举例来讲解吧,这样显示直观些,比如一段div区域是1200px居中,然后里面有三个div,宽度都是100px,要将这三个div放进大div里面,按照常规的做法应该这样写:

<style>
#abc{ margin 0 auto; width:1200px;}
#a{float:left; width:100px;}
#b{float:left; width:100px;}
#c{float:left; width:100px;}
</style>

<div id="abc">
<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
</div>

但这样的布局法,三个小div不会居中,因为有float:left的存在,只会向左靠齐。而由于三个div不是具体的文字或图片,abc中使用text-align:center是没有用的,在这样情况下,最好的方法就是在三个小div外围再套上一个div,而这个div的宽度必须是这三个div之和,比如这个div是#ddd,布局代码如下:

<style>
#abc{ margin 0 auto; width:1200px;}
#a{float:left; width:100px;}
#b{float:left; width:100px;}
#c{float:left; width:100px;}
#ddd{ width:300px; margin 0 auto;}
</style>

<div id="abc">
<div id="ddd">
<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
</div>
</div>



下一条:如何巧妙调用当前系统日期年月日
网站套餐/客户案例/公司优势/域名主机/企业邮箱/网站推广/关于我们/返回首页
版权所有:南京希丁哥网络信息服务有限公司