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

回答