Vertical alignment within a table

[Historical Forums User]

Hi guys,

Quick and simple hopefully. Take a look at the page I’ve linked below. All of the info (pics,blurb,audio players) is in a table. I created the table in MS Word and literally copied and pasted the table into word press which it apparently likes. However sometimes it doesn’t remember all the formatting so I was wondering if you could let me know the code that will allow me to vertically centre align everything that is in the table? If come across ‘vlign’ but haven’t managed to make it work for me yet.

http://dnaproductionsuk.com/home/audio-mixing-mastering/

Any help appreciated. Any code is fine. I realise I’m in a CSS forum but if you know html to solve it that’s just as good.

Thanks!

[Kitty Giraudel]

I’d go with vertical-align: middle; on both th and td tags.

[Historical Forums User]

Hey Hugo thanks for getting back.

I’ve tried that yes, seems logical but I haven’t got it to work. Here is the code for the first row of my table. See anything wrong with it that would mean all columns of that row wouldn’t align?

MOD EDIT: Unviewable Code Removed

[Historical Forums User]

It won’t let me post it. Any chance you can check the source code for that page?

[Paulie_D]

You certainly need to remove the inline styling (which is wrong anyway).

Add: vertical-align: middle;

to line 3466/7 + in your CSS sheet

.entry-content td,
.comment-content td {
border-top: 1px solid #ddd;
padding: 6px 10px 6px 0;
vertical-align: middle;
}

I do think, however, that you might want to think about converting that table into a series of divs.

[Historical Forums User]

Ah great thanks, that’s done it. Could you tell me, does that apply to every table in the site? If not, what section of the code ‘directs’ it to this particular table?

[Paulie_D]

It will apply to all tables **within divs with a class of “entry-content” or “comment-content”**.

[Historical Forums User]

I’m used to dabble in a bit of C++ so I’m thinking along those lines… How do I ‘declare’ this table to have the class of entry-content? Obviously it has been done but by word press for me! Thanks for your help!

[Paulie_D]

The table doesn’t have that class, the div in which the table is sitting has that class.

I have little knowledge of WP but my assumption is that every post/entry is given a div in which to sit and that’s what you have pasted you table into.

[Historical Forums User]

That would make sense yes. I’ve just noticed that it has changed the homepage items within the table as well. do you know how I would say, change table in page #x rather than the whole div? At the moment it reads

.entry-content td,
.comment-content td {
border-top: 1px solid #ddd;
padding: 6px 10px 6px 0;
vertical-align: middle;
}

So I just need to change .entry comment td to maybe the page id td? does that sound right?

[Paulie_D]

Well…obviously, it’s really ‘old style’ to be using tables at all….

However, if you want that vertical alignment on a **specific page** only then you will have identify the ID that goes with your page (.page-id-321 I think.)

As I sad though, you should be moving away from tables and perhaps thinking of using a custom post type or a wrapping div with a special class.

As always, there are better people than me at WP…in fact, anyone is better than me.

[Historical Forums User]

There’s maybe better people out there at WP but none quite as good at hitting the nail directly on the head! Thanks, that’s done it. I will certainly be looking into wrapping divs for round 2 of website updates but for now I just need this thing up there and looking good! Thanks again!

[Author]

Posts