Guillaume Guillaume - 4 months ago 9
CSS Question

Center with margin auto doesn't work

I use a jQuery animation in my page which adds some CSS properties and I don't understand why the

margin: auto
doesn't work.

The HTML code (with style properties added by 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>


My CSS code :

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

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


I don't know which property blocks the
margin: auto
to center the image.

Thank you.

Answer

Add text-align:center; to .content_tuto and it will center

Note, you have the widths style="width: 7680px; ... and style=".. width: 1280px; ... , so when you center you are centering for that width.