码迷,mamicode.com
首页 > 其他好文 > 详细

多个div同时居中的写法

时间:2017-01-05 00:52:02      阅读:198      评论:0      收藏:0      [点我收藏+]

标签:meta   pad   个数   属性   padding   play   显示   针对   body   

多个div在某个div的中间,他们个数不一定但是需要在那个父级div中显示(和margin:0 auto一样的效果)

 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">

.div_allinline
{
text-align:center;
margin:0 auto;
padding:0;
clear:both;
}

.subdiv_allinline
{
margin:0;
padding:0;
display:inline-block;
_display:inline;
*display:inline;
zoom:1;
}
</style>

</head>

 

怎么居中显示在一行呢?使用inline-block来做这个处理。


<body>
<div class="div_allinline">
<div class="subdiv_allinline">
你好,这是div1的第一行。
<br>你好,这是div1的第二行
</div>
<div class="subdiv_allinline">
你好,这是div2的第一行。
</div>
<div class="subdiv_allinline">
你好,这是div3的第一行。
<br>你好,这是div3的第二行
</div>
</div>
</body>
</html>

 

 

 

IE6,IE7中不支持inline-block,所以针对IE6,IE7写了下面的三个属性。

 

    _display:inline;
    *display:inline;
    zoom:1;

这样貌似就主流的浏览器里面都能够正常显示。div的宽度可以根据情况设置。

多个div同时居中的写法

标签:meta   pad   个数   属性   padding   play   显示   针对   body   

原文地址:http://www.cnblogs.com/yuyifan/p/6250731.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!