html - How to center three div on all browsers?

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/

How can i center these three div on all browsers?

Answer 1

下の 2 つを保持するには、追加の 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;

また、float:left; がある場合、これは正しく機能しません。の上。左にフロートすると同時に中央に配置するように指示してからです。

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