Question

当我在一个较小的屏幕上时，我试图将页面上的所有内容水平居中。

目前一切都是正确的;

这是我的CSS：

@media screen and (max-width: 1038px) {
.wrapper{
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}
}

我也试过margin: 0 auto;无济于事。 text-align:center;只会更改其div内的文字。

我正在处理的页面是http://tcsdesignreno.com/nvvolunteers/

如果您能提供帮助，请告诉我们，谢谢！

Answer 1

我会查看其中的任何内容以及对您的网站元素的响应。虽然看起来你已经有了这样的事情。

您可能需要针对您的目的提出具体内容。但是，使用其中之一并了解它们如何做到这将是制定自己的解决方案的良好起点。

Skeleton：http://www.getskeleton.com/（参见网格）
Twitter Bootstrap：http://twitter.github.io/bootstrap/index.html（参见脚手架）
基金会：http://foundation.zurb.com/（参见网格）

Answer 2

CSS

 #content{
   width: 1038px 
   margin-right: auto;
   margin-left: auto;
   padding: 10px;   //paddig might make this width a but more so you might need narrow that
   text-aling: center;
 }

我不确定我是否正确地做了那个文本，但这样的事情可以帮助

Answer 3

你可以使用这样的表：

<table width="1038px" align="center">
   <tr>
       <td>
          your main content
       </td>
   </tr>
</table>

水平居中页面的全部内容

3 个答案: