多divs居中

Question

我有2個divs裏面有3個div，所有2個圍繞一個大div。我嘗試和集中它，它不工作。這裏是我的代碼：

<div stye="margin-left:auto; margin-right:auto; width: 1210px;"> 
<div id="left" style=" float:left; width: 606px; height: 506px;"> 

    <div style="top:0px; float:left; width:300px; border: 2px solid #FF0; height:502px; text-align:center; font-family: Myriad Pro, Arial, sans-serif; color:#FFF;"><h1>A picture of a cool guy wearing our shirt will go in here.</h1></div> 

    <div style="top:0px; float:left; width:300px; border: 2px solid #FF0; border-left:0px; height:200px; text-align:center; font-family: Myriad Pro, Arial, sans-serif; color:#FFF;"><h1>A product image will go in here.</h1></div> 

    <div style="top:0px; float:left; width:300px; border: 2px solid #FF0;border-top:0px; border-left:0px; height:300px; text-align:center; font-family: Myriad Pro, Arial, sans-serif; color:#FFF;"><h1>A tight product image will go in here.</h1></div> 

</div> 
<div id="left" style="float:left; width: 604px; height: 506px;"> 

    <div style="top:0px; float:right; width:300px; border: 2px solid #FF0; border-left:0px; height:502px; text-align:center; font-family: Myriad Pro, Arial, sans-serif; color:#FFF;"><h1>A picture of a cool guy wearing our shirt will go in here.</h1></div> 

    <div style="top:0px; float:left; width:300px; border: 2px solid #FF0; border-left:0px; height:200px; text-align:center; font-family: Myriad Pro, Arial, sans-serif; color:#FFF;"><h1>A product image will go in here.</h1></div> 

    <div style="top:0px; float:left; width:300px; border: 2px solid #FF0;border-top:0px; border-left:0px; height:300px; text-align:center; font-family: Myriad Pro, Arial, sans-serif; color:#FFF;"><h1>A tight product image will go in here.</h1></div> 

</div> 
</div> 

Answer 1

margin：0 auto;寬度：1210px;

你也有一個錯字「麥粒腫」 :)

Answer 2

您應該使用CSS類更有效率。你也有兩個div id="left"。元素ID是獨特的，所以你應該使用類。

<style type="text/css"> 
.myclass { 
    top:0px; float:left; width:300px; border: 2px solid #FF0; height:502px; text-align:center; font-family: Myriad Pro, Arial, sans-serif; color:#FFF; 
} 
</style> 
<!-- this div gets all style from .myclass definition --> 
<div class="myclass">content</div> 

而且居中的div，新增的風格，你是對的margin: auto;