Centering images with text-align

Question

I am creating a simple site and I found out that I can center <img> tags with text-align: center; but id does not work on block elements like <div> for example. Can someone explain to me how exactly the text-align works and if it's god practice to use it to align images?

Thank you very much in advance :)

UPDATE

I also know about the margin: 0 auto; which in some situations works and in other situations it refuses to center elements.

Answer 1

It totally depends on your requirement, there are various ways to do so, one is that img is an inline element, so setting it to block and using margin: auto; will center your img

img {
    display: block;
    margin: auto;
}

Demo

Another way is which you are trying to attempt, which needs text-align: center; to be declared on the parent element and not the img tag itself, cuz I doubt you are using text-align: center; for the img tag and not for the parent... Where in the above solution we are targeting the img tag, so there's a difference between the two..

Demo

What's the good point here?

• You don't have to make the img a block level element.
• No need of margin: auto;

What's the bad point here?

• If you have p elements inside the div, they will be centered aligned as well, because the align property is inherited.

Demo

So what to do now? Align the p elements to the left using text-align: left; property, and here we will be targetting p like

This will keep the image centered and will align the p to the left

.wrap {
    text-align: center;
}

.wrap p {
    text-align: left;
}

Demo

---

Last but not the least, we can also use CSS Positioning where you can have a parent element set to position: relative; and than we use position: absolute; for the img tag, and than we assign top: 50% and left: 50% and than we deduct the 1/2 of total height and width of your img by using margin-top and margin-left properties respectively. This method comes handy in case where you need the image vertically as well as horizontally centered. (This method will require fixed height and width to be declared)

Answer 2

<div>
 <img src="img.png">
</div>

img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

Answer 3

My advice is to use text-align property for the texts only (of course there could be exceptions). And for centering images you can simply do like this:

img{
   display: block;
   margin: 0 auto;
}

A 'div', or any block element, without a declared width, can't be centered with margin: 0 auto;, but images will. 'Auto' counts pixels for you and make an element appear in the center

Answer 4

See W3: http://www.w3.org/TR/CSS21/text.html#alignment-prop

Whether you want to use margin:0 auto; or text-align:center , this really depends on what you're doing exactly and the surrounding markup, context.

I always try to use text-align:center; when possible. I also define images as a block which helps auto margins.

Also a great article by Chris at CSS tricks: http://css-tricks.com/centering-in-the-unknown/

Answer 5

The property text-algin:center basically does what it says. Its supposed to center text. You can either apply directly to the text that you want to center or apply it to the parent div. In this case every text within this div will be centered.

The better practise to center, e.g., images, is to use margin: 0 auto; as many have already suggested. Specifying auto tells the browser to automatically determine the left and right margins itself and to set them equal. It therefore guarantees that both margins have the same size, which is why the object is centered horizontally.

Hope that helps!