在CSS表中对齐图像和文本

Question

I have seen several CSS alignment tips, but none relating to a table.

My code for the table properties are as follows:

    table.pic {
    border-spacing: 1;
    }
    table.pic td {
    padding: 5px;
    border: 4px solid #cccccc;
    }
    table.pic tr:nth-child(odd) {
    background-color: #f2f2f2;
        }

    table.pic div {
        display:table-cell; 
        vertical-align:middle;
    }

This is my code for the first table row:

<table class="pic" style="width: 100%;">
<tbody>
<tr>
<td><img src="/sites/default/files/images/img.jpg" alt="" width="146" height="218" /></td>
<td>
<p>blahblah</p>
<p>poodle</p>
<p>noodle</p>
</td>
</tr>
</tbody>
</table>

No matter what change I try to make, the text still ends up on the cell to the right, but vertically it starts on the bottom line of the image. Anyone know what my issue is?

Answer 1

On jsfiddle the text is not align with the bottom edge of the picture, it's vertically centered : http://jsfiddle.net/u3AW2/

Maybe you have overwrites somewhere.

The text is also vertically centered with :

   table.pic td{
        display:table-cell; 
        vertical-align:middle;
    }

Answer 2

table.pic div {
        display:table-cell; 
        vertical-align:middle;
    }

aligns div elements, which are children of tables with a class of pic. I don't see the div in your html.

I assume you want

table.pic td {
            display:table-cell; 
            vertical-align:middle;
       }

to align all td elements of the table to vertical center.

Updade:

to attempt to override any theme rules you can get more selective

table.pic {
border-spacing: 1;
}
table.pic td {
padding: 5px;
border: 4px solid #cccccc;
}
table.pic tr:nth-child(odd) {
background-color: #f2f2f2;
    }

/* use more selectivity */
html body table.pic tr td {
    display:table-cell !important; 
    vertical-align:middle !important;
}

Answer 3

I had exactly the same issue and found it was because I was using a CSS Reset. For some reason this was conflicting with my style sheet. I was specifically using the one on Meyerweb. Are you using this reset? If so, try changing the first rule as follows:

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, caption, tfoot, thead,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}