How To Fix Table Alignment Issues in WordPress Twenty Ten Theme

Nothing is more frustrating than spending hours trying to get your images and text all set up in your WordPress page or post table, only to find that once you save it everything looks all wonky.  You know you have the alignment settings right, including using valign to center the text and images in the middle of their cells.

It works great in other themes and unless you had access to other WordPress sites you might not have thought about testing it that way.

Come to find out, there’s something weird in the global reset section of the style.css stylesheet of the Twenty Ten default theme that’s making this happen. Thanks to a thread at http://wordpress.org/support/topic/problem-with-table-alignment-in-posts-for-twentyten-theme-1, I found the solution that worked great.

By removing or commenting out the vertical-align: baseline line from the global reset section, then saving your changes, you’ll find that the table will look exactly as you had wanted.

Here are some screenshots so you can see what I’m talking about:

Before the change: A 2-column table with images in the left column and text in the right column. A very common scenario.

The style.css file with the default vertical align setting. You’re looking for vertical-align: baseline:

Same file with the line commented out:

Table alignment is now looking as it should. FINALLY!:

Upgrading the WordPress software after making this change did not undo the changes to the stylesheet, as I had feared would happen. Of course, that was testing an upgrade on a site using the child theme, Twenty Ten Weaver. The upgrade was on site where the change was made to that stylesheet. Will have to test this after upgrading WordPress on a site not using any child theme. The change to the default Twenty Ten theme works great, it’s just that I don’t have any Twenty Ten sites that need upgrading as of right now.