水平居中页面的全部内容答案

【问题标题】：Horizontally center entire contents of page水平居中页面的全部内容
【发布时间】：2016-08-26 17:46:43
【问题描述】：

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

目前一切都正确；

这是我的 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/

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

【问题讨论】：

你需要为你的块元素添加更多的“响应性”。它们只是停止安装较窄的容器并掉下来，但它们的宽度几乎保持不变。
就是这样。我希望它们都保持相同的宽度并移动到其他的下方。客户不希望元素变得更宽。我需要什么让他们都集中在左边不要排队。
在这种情况下，您必须删除浮动并在较小宽度的 css 上设置 margin: 0 auto。

标签： css responsive-design centering

【解决方案1】：

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

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

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

【讨论】：

这些可能会起作用，但我真的不想回去重组整个网站。我们正试图在一到两天内推出。有没有办法只用 CSS 制作包装器中心的每个元素？
答案是否定的。没有.wrapper * { margin: 0 auto; } 魔法黑客。您需要更好地了解 Web 开发，尤其是响应式设计。因为这似乎是你想要的。网络上有很多很好的资源来学习响应式网页设计。甚至更好的旧模拟书形式。我的朋友在这方面没有捷径。坚持下去，你就会到达那里。

【解决方案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;
 }

我不确定我的文字是否正确，但类似的东西可能会有所帮助

【讨论】：

【解决方案3】：

您可以使用这样的表格：

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

【讨论】：

我真的不想回到在我的 HTML 中使用表格。有没有办法用 CSS 做到这一点？
我崩溃了，实际上尝试了这个，但它根本没有用。
因建议用于布局的表格和使用即将失效且大部分未使用的属性（如align）而被否决。