html - 响应式网页设计纯 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;
}

用 Firebug 在 FF 和 Chrome 上测试，工作正常......！！！

另一种方法是向#sponsorsor添加宽度#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 是缓冲区以允许垂直滚动条。