Menu
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.
505
I know this is an old post, but wanted to share how i solved the same problem.
My image was inheriting a float:left from a parent class. By setting float:none I was able to make margin:0 auto work properly. Hope it may help someone in the future.
151
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.
34
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
