Выравнивание изображения и текста в таблице CSS

Question

Я видел несколько советов по выравниванию CSS, но не относящихся к таблице.

Мой код для свойств таблицы следующим образом:

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; 
    } 

Это мой код для первой строки таблицы:

<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> 

Независимо от того, какие изменения я пытаюсь сделать, текст еще заканчивается на ячейке справа, но вертикально начинается в нижней строке изображения. Кто-нибудь знает, в чем моя проблема?

Answer 1

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

выравнивает элементы div, которые являются дочерними элементами таблицы с классом рисунка. Я не вижу div в вашем html.

Я предполагаю, что вы хотите

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

выровнять все Td элементы таблицы в вертикальном центре.

Updade:

попытаться переопределить любые правила темы, которые вы можете получить более селективным

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 2

На jsfiddle текст не совпадать с нижним краем картины, он центрирован: http://jsfiddle.net/u3AW2/

Возможно, вы где-то переписываете.

Текст также центрирован:

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

Answer 3

У меня была точно такая же проблема, и нашел, что это произошло потому, что я использовал CSS Reset. По какой-то причине это противоречило моей таблице стилей. Я специально использовал тот, который был на Мейервебе. Вы используете этот сброс? Если да, попробуйте изменить первое правило следующим образом:

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; 
}