Search code examples
htmlcsstext-align

Why does text-align center headers?


Why does text-align: center headers? Headers are block elements h1,h2,etc. Why is it that text-align centers headers even though the documentation specifically says it does not: Docs on text-align

This property describes how inline-level content of a block container is aligned.

I'm a little confused as to why it wont center a block element like a div, but willing to center a header. Could it potentially be because text inside a header is inline, but the actual header itself is a block element?

http://codepen.io/stephenhuh/pen/KrkLZG - codepen on this phenomenon.

* {
    text-align: center;
}

.box {
    background-color: blue; 
    width: 150px;
    height: 150px;
}

Solution

  • From CSS 2:

    Any text that is directly contained inside a block container element (not inside an inline element) must be treated as an anonymous inline element.