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

在jsfiddle上，文本没有与图片的下边缘对齐，它是垂直居中的：http://jsfiddle.net/u3AW2/

也许你已经覆盖了某个地方。

文本也垂直居中：

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

Answer 2

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

将div元素对齐，这些元素是具有pic类的表的子元素。我没有在你的HTML中看到div。

我假设你想要

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 3

我有完全相同的问题，发现这是因为我正在使用CSS重置。出于某种原因，这与我的样式表相矛盾。我特意使用Meyerweb上的那个。你使用这个重置？如果是这样，请尝试更改第一条规则，如下所示：

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

在CSS表中对齐图像和文本

3 个答案: