Text-align unexpected behaviour

Question

I'm trying to understand text-align but it seems it acts with different rules based on what type of element it is applied to and where it is applied from, whether a parent or a child element.

To my knowledge, if I apply text-align:center to a div, then all of the containing elements will have a text-align:center property as well.

If I apply text-align:center on an inline element like an image, nothing will happen because the image has no surrounding space that is part of the element. I have this code and I have no idea why it behaves the way it does. What I'm trying to achieve is to simply center an image horizontally within a header tag and I achieve it this way:

body {
  margin: 0;
}

header {
  background-color: black;
  height: 100px;
  text-align: center;
}

img {
  height: 100%;
}

By applying text-align:center on the header element, the image is magically aligned in the center of the div. But why does that happen? Isn't the image supposed to be aligned within its own space, and since there is none, it shouldn't work? I thought that saying text-align:center in a div would be like typing it for each one of the containing elements as property so it was just a quicker way of doing it. But if I remove text-align:center from the header and I move it to the image element, then the image is not horizontally centered anymore, instead, it's on the far left of the header.

If I have a header with an image inside, isn't saying:

header{
   text-align:center;
}

the same as saying:

img{
   text-align:center
}

because the child elements get applied the parent property to them as well? I thought text-align would only act on the child elements of the element it is used on. but then why doesn't it work if I declare it on the image?

Even, though I tried to set the image to display:block and set text-align:center on it, this time I was sure it would work, but it didn't. Why? If I use text-align:center on a p element, which is a block element, the element is centered within its own space, shouldn't that happen too for images that are set to display:block?

useraZ4 · Answer

By applying text-align:center on the header element, the image is magically aligned in the center of the div. But why does that happen?

Images are, by default, display: inline, which causes them to be treated (more-or-less) the same way as a character of text.

But if I remove text-align:center from the header and I move it to the image element, then the image is not horizontally centered anymore, instead, it's on the far left of the header.

text-align describes how the inline content of the element should be aligned within the element.

An img element has no content.

If I use text-align:center on a p element, which is a block element, the element is centered within its own space

No, it isn't. The text inside the paragraph is centred. The alignment of the paragraph itself is unaffected (by default a p element is with: auto so will completely fill the available horizontal space after margins, borders and padding are accounted for).

ksav · Answer

The text-align CSS property sets the horizontal alignment of the inline-level content inside a block element or table-cell box.

https://developer.mozilla.org/en-US/docs/Web/CSS/text-align

In the following snippet, header is a block level element. img is an inline level element. And so the image is horizontally aligned to the center of the parent block level element.

header{
   text-align:center;
}

Is the following snippet the same as the above? No. Because text-align:center is not applied to a block level element that contains inline-level content.

img {
  text-align: center
}

Text-align unexpected behaviour

2 Answers