CODEWITHSUNDEEP
htmlcssimage
Conroy
Conroy

Reputation: 13

How can I center align my image into div?

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?

Upvotes: 0

Views: 75

Answers (2)

Martin Turjak
Martin Turjak

Reputation: 21214

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

Upvotes: 2

Alex Char
Alex Char

Reputation: 33218

Use text-align: center on main container:

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

Upvotes: 0

Related Questions