带边距自动的中心不起作用答案

【问题标题】：Center with margin auto doesn't work带边距自动的中心不起作用
【发布时间】：2016-07-12 18:11:51
【问题描述】：

我在我的页面中使用了一个 jQuery 动画，它添加了一些 CSS 属性，但我不明白为什么 margin: auto 不起作用。

HTML 代码（带有 jQuery 添加的样式属性）：

<body style="overflow: hidden;">
    <div id="tuto_wamp" style="width: 7680px; height: 923px; ">
        <!-- Step 1 -->
        <div style="height: 549px; width: 1280px; margin-top: 0px; margin-left: 0px; position: absolute; overflow-y: hidden; overflow-x: hidden; ">
            <div class="content_tuto">
                <img src="images/install1.png" alt="">
            </div>
        </div>
    </div>
</body>

我的 CSS 代码：

#tuto_wamp 
{ 
    background: #3a393c;
    width: 100%;
}

.content_tuto
{
    width: 100%;
    margin: auto;
    display: block;
}

我不知道哪个属性会阻止margin: auto 使图像居中。

谢谢。

【问题讨论】：

您正在测试哪些浏览器？
Chrome Firefox 和 Opera
宽度：100%，边距：自动；你的问题我不清楚，请jsfiddle.net
我不明白你想要什么世斌。

标签： css margin

【解决方案1】：

我知道这是一篇旧帖子，但想分享我如何解决同样的问题。

我的图像从父类继承了 float:left。通过设置float:none 我能够使margin:0 auto 正常工作。希望它可以帮助将来的人。

【讨论】：

【解决方案2】：

将text-align:center;添加到.content_tuto，它会居中

请注意，您有 style="width: 7680px; ... 和 style=".. width: 1280px; ... 的宽度，因此当您居中时，您就是以该宽度为中心。

【讨论】：

因为您希望边距在带有显示块而不是div的图像上，所以请查看jsfiddle.net/xVNbQ/1

【解决方案3】：

它不起作用，因为您已将 .content_tuto 的宽度设置为 100%;

【讨论】：

哪一个？在 tuto_wamp 或 .content_tuto 中？
你怎么能在每边没有边距的东西上“每边都有等量的边距”？如果您的宽度为 100%，那么您将填充所有空间，因此两侧边距均为 0。您无法将 100% 宽度的框居中。

【解决方案4】：

我创建了一个小提琴并添加了一个边框来可视化和解决

http://jsfiddle.net/meetravi/Y42Pf/

您也可以从这里很好地阅读 center a div in css

http://stever.ca/web-design/centering-a-div-in-ie8-using-marginauto/

希望对你有帮助。

【讨论】：