Why doesn’t text-align: center work? A primer on block and inline elements in HTML and CSS

If you’re just starting your foray into web development, you’ll probably find that HTML and CSS have a variety of quirks that can make working with them somewhat frustrating for beginners. One of these quirks involves the text-align CSS attribute, as the attribute only applies its effects to certain kinds of HTML elements.

1. Introduction
2. inline elements
   1. About inline elements
   2. Vertically aligning inline elements
3. block elements
   1. About block elements
   2. Centre-aligning blocks
   3. Left or right-aligning blocks
   4. Using text-align for text within blocks
4. Switching an element’s type
5. Conclusion

1. Introduction

Predictably, since the attribute is named text-align, it affects how text elements align themselves in the page:

<div style="text-align:center;">
    This text is centre-aligned.
</div>

Interestingly, by default (and in modern browsers), text-align:center also affects <img> elements, even though they are obviously not “text”:

<div style="text-align:center;">
    <img src="/wp-content/uploads/2020/06/terresquall-blog-icon.png" alt="Terresquall Blog Icon" width="128" height="128"/>
</div>

Note, however, that text-align:center doesn’t always work.

<div style="text-align:center;">
    <aside style="width:60%;background:#eee;">
        This aside block is not centre-aligned.
    </aside>
</div>

This is because text-align:center only affects inline elements, and <aside> is not an inline element by default. It is a block-level element. To align it, we will have to use something other than text-align, or turn it into an inline element.

---

Article continues after the advertisement:

---

2. inline elements

a. About inline elements

Inline elements in HTML are elements that behave like text. That is, they stack horizontally across the page as more of them are added, just like text. If an inline element is placed alongside text, it will fall “in line” with these text elements:

<div>
    Here is some text. <img src="/wp-content/uploads/2020/06/terresquall-blog-icon.png" alt="Terresquall Blog Icon" width="24" height="24"> This image "lines up" with our text.
</div>

Hence why they are called inline elements.

b. Vertically aligning inline elements

Update 4 July 2022: If you are looking to use vertical-align to position your inline or inline-block elements, we have a new article that goes into more detail on how to use it!

On these elements, the vertical-align CSS attribute can be used to control how inline elements align vertically with respect to each other. For example, in the previous example, vertical-align:top can be used to make the inline image align with the text.

<div>
    Here is some text. <img src="/wp-content/uploads/2020/06/terresquall-blog-icon.png" alt="Terresquall Blog Icon" style="vertical-align:top;" width="24" height="24"> This image "lines up" with our text.
</div>

3. block elements

a. About block elements

Block-level elements in HTML take up a “block” of space in the page. When placed after (or beside) text and inline elements, they break into a new line and take up an entire “block” of space.

<div>
    Here is some text. <aside style="background:#ddd;">This <aside> element is a block-level element.</aside> This image is an inline element.
</div>

Block-level elements can have their widths set to a different value using the width CSS attribute, but they will always take up the entire row of space wherever they are at, even if their width is less than the area of the entire row.

Note, however, that in such cases, the text-align attribute will not align the block-level element itself. It will only align the text within the block.

<div style="text-align:center;">
    Here is some text. <aside style="width:60%;background:#ddd;">This <aside> element is a block-level element.</aside> This image is an inline element.
</div>

b. Centre-aligning blocks

To align block-level elements to the centre, we will need to set its left and right margins to auto using the margin CSS attribute. This can be done in a variety of ways:

<div style="text-align:center;">
    Here is some text. <aside style="width:60%;background:#ddd;margin:auto;">This <aside> element is a block-level element.</aside> This image is an inline element.
    <aside style="width:60%;background:#ddd;margin-left:auto;margin-right:auto;">This <aside> element is a block-level element.</aside>
    <aside style="width:60%;background:#ddd;margin:10px auto;">This <aside> element is a block-level element with 10 pixel margins on the top and bottom.</aside>
    <aside style="width:60%;background:#ddd;margin:10px auto 10px auto;">This <aside> element is a block-level element with 10 pixel margins on the top and bottom.</aside> 
</div>

---

Article continues after the advertisement:

See discounted assets

---

c. Left or right-aligning blocks

To align block-level elements to the left or right, one side’s margin attribute needs to be set to 0, while the other side’s margin needs to be set to auto.

<div style="text-align:center;">
    <aside style="width:60%;background:#ddd;margin-left:0;margin-right:auto;">This <aside> element is a left-aligned block-level element.</aside>
    <aside style="width:60%;background:#ddd;margin-left:auto;margin-right:0;margin-top:10px;">This <aside> element is a right-aligned block-level element.</aside> 
</div>

d. Using text-align for text within blocks

Finally, notice that the text in block-level elements can be separately aligned using text-align too:

<div style="text-align:center;">
    <aside style="width:80%;background:#ddd;margin-left:0;margin-right:auto;text-align:right;">This is a left-aligned block-level element with right-aligned text.</aside>
    <aside style="width:80%;background:#ddd;margin-left:auto;margin-right:0;margin-top:10px;text-align:left;">This is a right-aligned block-level element with left-aligned text.</aside>
    <aside style="width:65%;background:#ddd;margin:10px auto;">This is a centre-aligned block-level element inheriting the text alignment of its parent.</aside> 
</div>

Notice that if no explicit text-align property is specified on the block, then it will inherit the most recent text-align property of its parent element(s).

4. Switching an element’s type

By default, every HTML element that exists is either an inline or a block. However, an inline element can easily be changed to become a block-level element and vice versa using the display attribute. This means that you can, for example, change <img> into behave like a block-level element, or change block-level tags like <aside> or <article> to inline elements.

<div>
    The image below been made into a block-level element.
    <img src="/wp-content/uploads/2020/06/terresquall-blog-icon.png" alt="Terresquall Blog Icon" width="128" height="128" style="display:block;">
    <br>
    The following aside element has been made inline: <aside style="display:inline;background:#eee;">I am an &lt;aside&gt; element that has been made inline.</aside>
</div>

5. Conclusion

There are many more possible values to the display CSS attribute than just block or inline. These values are not applied to HTML elements by default, however, and require the web developer to manually assign them to specific HTML elements. They are a topic for another post, however.

Did this article help you better understand how text-align works? Leave a comment to let us know about it! Alternatively, if you find that you still have questions on this after reading this article, feel free to post a comment and tell us about it too!

---

Article continues after the advertisement:

See discounted assets

---