Geek asks and answers

Auto-tag center not working

I am using jQuery animation on my page, which adds some CSS properties, and I don’t understand why it margin: autodoesn’t work.

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 is:

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

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

I don’t know which property blocks margin: autoto center the image.

Thank.

+3
source share
4 answers

Add text-align:center;in .content_tutoand it will be centered

Note that you have a width style="width: 7680px; ...and style=".. width: 1280px; ...therefore when you center, you center that width.

+2
source

I know this is an old post, but wanted to share how I solved the same problem.

float:left . float:none, margin:0 auto . , - .

+5

it will not work because you set the width .content_tutoto100%;

+1
source

I created a violin and added a border for visualization and solution

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

You can also read the center div well in css from here

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

Hope this helps.

0
source

More articles:


All Articles