Question

<div style="width: 400px; height: 150px; background-color: red">LOGO</div>
<div style="width: 200px; height: 1000px; float: left">sfsdf </div>
<div>sdad</div>

http://jsfiddle.net/AuT7n/

我如何在所有浏览器中居中这三个div？

Answer 1

你需要一个额外的div来保持底部两个。

<div class="centre" style="width: 400px; height: 150px; background-color: red">LOGO</div>
<div class="centre" style="width: 400px; height: 1000px; ">
   <div style="width: 200px; height: 1000px; float: left; background-color: green">sfsdf </div>
   <div style="width: 200px; height: 1000px; float: right; background-color: purple">sdad</div>
</div>

风格：

div.centre {
margin-left:auto;
margin-right:auto;
display:block;    
}

Answer 2

div {
margin-left:auto;
margin-right:auto;
display:block;    
}

如果您只想将文字div设为居中，则需要添加

text-align:center;

当你有浮动时，这也无法正常工作：左;上。因为你告诉它向左浮动并同时居中。

http://jsfiddle.net/AuT7n/7/

如何在所有浏览器中居中三个div？

2 个答案: