響應式網頁設計純CSS集中幫助

我無法讓以下網站的贊助商部分正確居中，我使用響應式網頁設計，並且無法讓贊助商正確居中。響應式網頁設計純CSS集中幫助

謝謝...

2012-10-19 nagates

你需要給你的贊助商div的寬度，或margin:0 auto不知道如何計算的位置。給它一個1315px的寬度，看看它是如何移動的。

2012-10-19 03:57:23

雖然通過給容器一個固定的寬度，是不是讓設計減少「響應」？ – MrWhite

@ w3d你說得對，最好使用百分比寬度來保持網站的響應 - 例如'width：90％'而不是'width：1315px'。 – whostolemyhat

您也可以在CSS中使用@media來更改不同屏幕尺寸的寬度。這裏的主要觀點是，要使用margin：0 auto獲得任何自動居中的內容，您必須知道其寬度，無論是以％還是以px指定。 –

#sponsors ul{ 
    padding:0px; 
}

添加屬性text-align:center，使最終的風格看起來像：

#sponsors ul{ 
    padding:0px; 
    text-align:center; 
}

測試在FF和Chrome使用Firebug，和正常工作......！

另一種方法是將寬度添加到#sponsors或#sponsors ul並指定屬性margin:0 auto。

2012-10-19 06:48:06 rajukoyilandy

我不覺得正確的做法是添加'text-align：center'，文本元素？ – MrWhite

@ w3d：'text-align'屬性並不是用來對齊純文本的內容。它描述了像文本這樣的內聯內容如何在其父塊元素中對齊。根據CSS規範，它適用於塊元素的內聯內容。這意味着你不僅限於對齊文本 - 文本對齊屬性可用於對齊塊級元素內的任何元素。 – rajukoyilandy

這似乎工作，但在我的屏幕上，底部不完整的行，對齊本身的中心，這是不理想的... – nagates

嘗試添加這對您的樣式表：

#sponsors ul { text-align: center; } 
#sponsors ul li { display: inline-block; }

應該工作。

2012-10-19 09:28:15

是的，但內聯塊不能在IE7中工作，除了部分。 –

是的，但是IE7在響應式雷達上並不是完全的，對於較老的IE瀏覽器，只是使用非常簡單的樣式或有條件的樣式。 –

正如一些評論所述，保留響應能力的最佳方法是使用@media有條件地向主要部門應用保證金。

假設我們想要使用960像素的分割。在網格CSS文件的底部。

@media (min-width:980px) { 
.pure-g {width:960px;margin:0 auto;} 
}

一旦最大寬度下降到980以下，佈局將實際上變成左邊界的流體。額外的20px是允許垂直滾動條的緩衝區。

2014-02-04 17:53:47 Jestep

回答