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

Question

我無法使以下網站的贊助商部分正確居中，我正在使用響應式網頁設計，而贊助商無法正確居中。

謝謝...

http://dev.marshallareastagecompany.org/

Answer 1

您需要給贊助商的div設置寬度，否則margin:0 auto不知道如何計算排名。 給它一個1315px的寬度，看看它如何移動。

Answer 2

轉到http://dev.marshallareastagecompany.org/public/css/pages/index.css並找到規則#sponsors ul （最可能在第128行）

#sponsors ul{
  padding:0px;
}

添加屬性text-align:center使最終樣式如下所示：

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

經過FF和Chrome的Firebug測試，工作正常... !!!

另一種方法是為#sponsors或#sponsors ul添加寬度並分配屬性margin:0 auto 。

Answer 3

嘗試將其添加到樣式表中：

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

應該管用。

Answer 4

如某些評論中所述，保持響應能力的最佳方法是使用@media有條件地將邊距應用於主要部門。

假設我們要使用960px的分割。 在網格css文件的底部。

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

一旦最大寬度降到980以下，則布局將有效地變得順着左邊界變流暢。 額外的20px是緩沖區，以允許垂直滾動條。