为什么项目没有在页面（保证金：汽车）的中心

-1

<section id="ItemsContainer"> 
    <div id="FirstItem"> 
     This is First Item 
    </div> 
    <div id="SecondItem"> 
     This is Second Item 
    </div> 
</section>

，这是我的CSS样式

#FirstItem, #SecondItem { 
    text-align: center; 
    float: left; 
    padding: 5px; 
} 

    #FirstItem *, #SecondItem * { 
     margin-left: auto; 
     margin-right: auto; 
    } 

@media screen and (min-width: 600px) { 
    #ItemsContainer { 
     margin-left: auto; 
     margin-right: auto; 
     width: 500px; 
     padding: 5px; 
    } 

    #FirstItem, #SecondItem { 
     margin-left: auto; 
     margin-right: auto; 
     width: 200px; 
     text-align: center; 
     float: left; 
     padding: 5px; 
    } 
}

，这是对的jsfiddle代码

问题是它们位于页面的中心，但不完全位于页面的中心。有谁能够帮助我？

来源

2013-02-15 ahmadali shafiee

'＃ItemsContainer' width'500px'，each div inside width'200px'。将每个子div的宽度增加到'240px'并且它们将居中:) – Morpheus 2013-02-15 11:43:44

您需要为'#FirstItem，＃SecondItem'指定一个宽度 – martincarlin87 2013-02-15 11:44:06

您已将#ItemsContainer设置为500px宽，但其中的两个元素不构成相同的宽度。如果你计算2 * 200px，加上5px填充在每一边，那就是420px。将#ItemsContainer更改为420px似乎可以做到，或您可以调整第一个和第二个项目的宽度，使总数达到500px。

来源

2013-02-15 11:43:27 LeonardChallis

我已经更新了你的提琴：http://jsfiddle.net/ahmadalli/AJUsA/1/

我做只有变化是：

#ItemsContainer { 
    width: 500px; 
    float: left; 
} 

#FirstItem, #SecondItem { 
    text-align: center; 
    float: left; 
    padding: 5px; 
    width:240px; 
}

我加入了浮于#ItemsContainer给它高度，但最好你可能会使用一个clearfix类那。

来源

2013-02-15 11:47:46 martincarlin87

为什么项目没有在页面（保证金：汽车）的中心

回答

相关问题