The Ups and Downs of Text Placement

Typography can make or break a web project far more quickly than many non-designers would ever expect. A large part of that typography, especially in auto-generated solutions like Wordpress nav menus, is the alignment and spacing of text-based elements. One of the least intuitive, but design-crucial, functionality features is the ability to center text on the fly vertically, as well as horizontally.

There's nothing quite as simple as text-align: center for the y-axis of the web. One can hope that the future of industry standards will more efficiently address this issue, but for now, we are left to our own, tangentially related solutions. One of the simplest and most widely support solutions is via display: table and display: table-cell CSS code, to leverage older table based functionality, while not falling into a Web 2.0 portal into the late 90's.

First, the HTML, which is quite simple. Technically, any container will do for this particular CSS function, but I'll be using an unorganized list in deference to the Wordpress menus that I leverage this with most often. For demo purposes, we'll be using some static text of varying lengths.

HTML

<ul class="demo-menu">

<li>

<p>Menu Item 1</p>

</li>

<li>

<p>Menu Item 2, plus lots of filler text so you can watch this area wrap and still center as well as it's smaller brethren.</p>

</li>

<li>

<p>Menu Item C, because non-sequitur.</p>

</li>

</ul>

Now, close your eyes and believe in magic, because here comes the CSS! Here's what we're doing: the <ul> is set to have the display properties of a table, while its <li> are each set to take the properties of individual table cells. Once this hierarchy is established, the vertical-align: middle will take its proper course on all the text within the hybrid <li> / table cell sections. All the rest of the CSS is just to make things look all fancy and professional.

CSS

ul.demo-menu {

display: table;

width: 80%;

margin: 0 auto;

}

ul.demo-menu li {

display: table-cell;

padding: 50px 0;

width: 30%;

margin: 0 0.5%;

background: #00728C;

border: 1px solid #B2D5DD;

text-align: center;

vertical-align: middle;

}

ul.demo-menu li a {

color: #ffffff;

}

Check out below for the final demo of the beautifully organized text alignment. Give me a shout out if there's any specific solutions or other best practices you'd like to see! Variety is the spice of life, and tossing out code bits like this breaks up the longer reads of the industry related posts I've tended to favor so far.

• Menu Item 1

• Menu Item 2, plus lots of filler text so you can watch this area wrap and still center as well as it's smaller brethren.

• Menu Item C, because non-sequitur.