css - 水平居中页面的全部内容

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

我会查看其中的任何一个以及对您的站点元素的响应性。虽然看起来你已经有这样的事情发生了。

您有可能必须为您的目的想出一些特定的东西。但是使用其中一个并查看它们是如何做到的将是制定您自己的解决方案的一个很好的起点。

• 骨架：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>