多重中心

Question

我有2个div，里面有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

保证金：0自动;宽度：1210像素;

你也有一个错字“stye”：）

Answer 2

您应该使用CSS类更高效。你还有两个id="left"的div。元素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;