居中内容问题答案

【问题标题】：Centering content issue居中内容问题
【发布时间】：2013-09-30 21:25:43
【问题描述】：

谁能告诉我我需要做什么才能使下一页的内容正确居中？

我一直在尝试使用今天早些时候使用的其他东西：

#divWrapper {margin:0 auto; text-align:center;} 
#div {text-align:left;}

但这对我不起作用。我需要帮助的页面之一是：已编辑

感谢您的帮助，我只是想在睡觉前解决这个问题：\

【问题讨论】：

您需要为#divWrapper 添加宽度。没有宽度 'margin:0 auto;'不会工作。

标签： css center alignment

【解决方案1】：

#main-inner {
    position: relative;
    width: 960px;
    border-top: 3px solid #DADADA;
    margin: 20px auto 0;
    overflow:auto;
    zoom:1;
}

试试这个。用这个替换现有的。它应该使内容居中。

【讨论】：

完美！谢谢，晚安！ ;)
居中时需要注意的事项：1.) 如果您使用margin:x auto x 方法居中容器，则容器需要具有非百分比宽度 2.) 父宽度不是必需的，但应该是更大以欣赏居中的力量 3.) 容器必须是块级元素 4.) 不需要浮动。 zoom 和 overflow 刚刚添加以调整容器的基线，因为它包含浮动项目。
好的，感谢您的提示。我现在才开始大量使用 css，所以我仍然时不时地跌跌撞撞；）
这不能回答你的问题！如果您希望使用不同的屏幕尺寸或使用 javascript 计算宽度，请使用 Google css 媒体查询

【解决方案2】：

它需要一个宽度！正常工作。

【讨论】：

.newcontent 的宽度为 100%
要使用 100% 的宽度，你需要在四周加上一个边距，如果没有真正的宽度是无法计算的。 10% 的边距将应用 100px 的边距
Philip，感谢您的回复，您能告诉我如何操作我正在使用的实际实时代码吗？我正在使用 Chromes 开发者工具尝试不同的东西，但没有任何帮助。
你只要把margin值改成10%：即margin:10%；您可以使用 javascript 计算屏幕宽度或使用媒体查询。

【解决方案3】：

给你的#divWrapper 一个宽度。默认情况下，宽度将扩展到包含元素，因此要创建居中的外观，其宽度需要小于其包含元素。

【讨论】：

【解决方案4】：

只有当您提供一个固定宽度时，您才能使用margin:0 auto 使元素居中，从而使边距可以自动定位。所以在你的包装器中添加一个固定的，它应该可以工作。

【讨论】：

【解决方案5】：

您可能还需要指定 text-align:center;如果您希望实际的 div 内容居中。

【讨论】：

【解决方案6】：

试试这个#divWrapper {margin:0 auto; text-align:center;width:960px}

#div {text-align:left;width:500px}

编辑：您的 CSS 中有输入错误。检查此更新的 CSS 以了解 margin-inner 和 margin-inner-right。它会解决你的问题

#main-inner {
        float:left;
        position:relative;
        width:100%;
        border-top:3px solid #dadada;
        margin-top:20px;
        margin-right:auto;
        margin-left:auto;
}


#main-inner-right {

        position:relative;
        width:640px;
        text-align:left;
        margin-top:20px;
        margin-right:auto;
        margin-left:auto;
}

【讨论】：

我实际上并没有在我的页面上使用 divWrapper 和 #div，我正在尝试调整已经存在的内容。您是否可以查看实时代码并告诉我我需要调整什么？感谢您的回复。
@Scott - 该页面使用 960 像素的固定宽度作为内容包装器。可变宽度的错觉是通过在顶级包装元素中重复背景图像来给出的，这些元素具有 100% 宽度和自动边距。
查看我更新的回复。如果对您有帮助，请标记为答案。达米安