爲什麼項目沒有在頁面（保證金：汽車）的中心

-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

爲什麼項目沒有在頁面（保證金：汽車）的中心

回答

相關問題