May 04, 2024

align-items: center vs. text-align: center

aka Understanding flex columns better
edit

For going on three years now, I’ve been working daily in an environment where all the code that I write has to support both React and React Native. People unfamiliar with what it takes to support both platforms might not realize a few restrictions you must deal with. One of them is this: Flexbox is your only layout option.

That’s right. No tables. No grids. No anything else. Flexbox is all you got.

Because of this, there’s a common mistake I’ve seen developers make over and over I want to demonstrate and fix.

In React Native, every element at a fundamental level is a View or a Text. Thus, when creating components that work across platforms, we have to use these View and Text components on web, too. Generally, this is accomplished through a library like react-native-web, which renders the correct underlying component depending on the platform.

It’s important to know that there is one key difference between a View and a div: a View is not a block level element.View is a flex container with flex-direction set to column.

With that in mind, now I’m going to show you two very similar examples, and I want you to spot the difference.

Lorem ipsum
Lorem ipsum

Did you spot it? What about now?

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam fermentum, arcu id faucibus accumsan, turpis ex interdum est, eget tristique odio odio eget nibh.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam fermentum, arcu id faucibus accumsan, turpis ex interdum est, eget tristique odio odio eget nibh.

You see the difference? Both examples are Flex columns. The first example has set align-items to center, while the second example has kept the default align-items of stretch, but used text-align: center on the text instead. This is a small detail that’s easy to overlook, but can have you scratching your head later trying to get things to align the way you’d like.

When the text is short, it can seem like which CSS you use doesn’t matter, but if we were to add a background to the text in our first two examples, we’d notice the difference right away.

Lorem ipsum

Lorem ipsum

When we change align-items to center, we shrink all the children to their minimum content width. For text that is shorter than the width of its container, it will appear the same as text-align: center, but will behave differently once our text starts to wrap.

My main reason for pointing this out is that I so often see unnecessary compensations on the children of a Flex container. Yes, sometimes it might be easier to set a particular align-items on the parent, and then use align-self on a child to make an adjustment. That’s why the CSS property exists, but often these compensations are unnecessary entirely.

For example, if we use align-items: center instead of setting the text-align on the title, and we later have an element that we need to take up the full width, we might compensate by setting it’s width to 100%.

This is an example title

This is an example paragraph with the width set to 100%.

We could avoid that simply by setting text-align: center on the title instead.

If you peek under the hood at the Tailwind for that example, you’ll see we’ve added two classes when one would have done the job. Do this enough times across an app, and the number of unnecessary styles can really grow.

This is a simple thing to get confused about and only notice later when you’re making a lot of compensations on the children to get things aligned correctly. Hopefully by seeing this simple example, the gears will start turning and you’ll spot when you might need to use one or the other, or even sometimes both.


Liked the post?
Give the author a dopamine boost with a few "beard strokes". Click the beard up to 50 times to show your appreciation.
Need help with your software problems?

My team and I are ready to help you. Hire Agathist to build your next great project or to improve one of your existing ones.

Get in touch
Kyle Shevlin's face, which is mostly a beard with eyes

Kyle Shevlin is the founder & lead software engineer of Agathist, a software development firm with a mission to build good software with good people.

Agathist
Good software by good people.
Visit https://agath.ist to learn more
Sign up for my newsletter
Let's chat some more about TypeScript, React, and frontend web development. Unsubscribe at any time.
Logo for Data Structures and Algorithms
Data Structures and Algorithms
Check out my courses!
If you enjoy my posts, you might enjoy my courses, too. Click the button to view the course or go to Courses for more information.