Using the Text-align CSS Property to Center DIVs

Introduction

At first sight, building fully-centered web page layouts with CSS looks like an extremely easy process that can be tackled with minor hassles, since it requires only a basic background in coding HTML pages and working with a few simple style sheets. That’s it.

Unfortunately, creating this kind of web design isn’t always as simple as it seems. Very often, it’s necessary to be aware of the pros and cons in using a particular DIV alignment technique, not to mention the numerous browser incompatibilities that must be properly addressed for achieving a consistent layout.

Despite all of these inconveniences, there are a number of well-trusted CSS approaches that can be used for building centered web document layouts. These can be mastered in a short time, even by inexperienced designers. Based upon this concept, in this series of articles you’ll find a comprehensive guide to implementing several DIV centering methods for constructing both fixed and liquid web page designs.

And speaking of liquid designs, you’ll possibly recall that in the previous article of this series, I demonstrated how to build a fully-centered web document layout whose main sections were created by using an elastic approach. In this particular case, the layout in question was centered across the whole web page by using the “text-align: center” CSS property, which was attached to the body element.

Please note that this sample web document was comprised of the typical header and footer sections, and a single main area as well. Thus, it’d be pretty instructive to use the aforementioned CSS property to create a liquid layout that contains three main columns, in this way recreating a more realistic situation.

Therefore, in this second episode of the series I’ll be explaining how to build this kind of centered web page layout by taking advantage of the functionality of the familiar “text-align” CSS property. Let’s jump in!