如何将图像居中对齐div？

Question

I have a div meant to contain all content on said site, an image I have nested into the div doesn't want to center and I'm not sure why?

here is the CSS.

#wrapper {
width: 1000px;
margin: 0 auto;
background-color: #f4f9f1;
}

#intro {
padding-bottom: 10px;
width:80%;
margin:10px auto;
border-bottom: 3px solid #b32230;
}

intro is the id given to said img, it just floats to the left of the div( id is wrapper) and wont center even though I have right and left margins set to auto?

Answer 1

The problem with margin: auto; is that it will only center block level elements ... and img is by default displayed as inline and follows the text flow (to the left). If you add display: block to it it should work:

DEMO

#intro {
    display: block;
    padding-bottom: 10px;
    width:80%;
    margin:10px auto;
    border-bottom: 3px solid #b32230;
}

This way you don't need to centrally align the text of the wrapper element.

But if you want to center all inline children of the the wrapper - just use text-align:center on the #wrapper ... however then you may need to have line breaks before and after the images or some text could end up next to them and push them out of the center =)

DEMO

Answer 2

Use text-align: center on main container:

#wrapper {
    width: 1000px;
    margin: 0 auto;
    background-color: #f4f9f1;
    text-align: center;/*Add text-align center*/
}