I would like to shed light on a use case for text-align that some of us including me might not consider getting the benefit of it.

The Trick

Before discovering the trick I’m gonna discuss in the article, I wouldn’t think twice about how an element should be aligned. The common ways I use are:

  • Flexbox
  • Margin auto
  • Positioning

In the coming examples, I’ll explore some use cases for text-align that are easy and powerful.

This one is my favorite and I use it a lot. By having each tag as an inline-block element, it’s easy to get benefit of text-align: center on the wrapper.

.tags-wrapper { text-align: center; /* Text align for the win! */
} .tag { display: inline-block;
}

Let’s suppose that there are two wrappers, each of them is taking 50% of its parent. Inside each one, we have an <img>. The one on the right is right-aligned, while the other is left-aligned. How can we achieve that easily?

By default, the <img> is an inline element, which can be affected by text-align property. If I need to align the logo to the right, here is what I would do:

<div class="wrapper"> <div class="item start"> <img src="logo.png" alt=""> </div> <div class="item end> <span>Brought to you by</span> <img src="logo.png" alt=""> </div>
</div>
.item.start { text-align: right;
} .item.end { text-align: left;
}

Card Component

The user avatar could be an icon or anything else, followed by an element with display: block. In this case, it’s followed by the card title.

.card { /* Other styles */ text-align: center;
}
.card-avatar { display: inline-block; width: 50px; height: 50px; /* Other styles */
}

Combining Text Align with CSS Writing Mode

In case CSS writing-mode is used, it’s possible to center a headline vertically.

h2 { writing-mode: vertical-lr; height: 100%; text-align: center;
}

Demos

See the Pen Text align for inline/inline-block elements by Ahmad Shadeed (@shadeed) on CodePen.

Thank you for reading.