Question

我在页面中使用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将图像居中。

谢谢。

Answer 1

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

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

Answer 2

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

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

Answer 3

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

Answer 4

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

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

你也可以从这里读取中心的css div

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

希望它有所帮助。

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

4 个答案: