1

我见过几个 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>

无论我尝试进行什么更改，文本仍然会在右侧的单元格中结束，但垂直它会从图像的底线开始。有谁知道我的问题是什么？

4

3 回答 3

1

在 jsfiddle 上，文本与图片的底部边缘不对齐，它垂直居中：http: //jsfiddle.net/u3AW2/

也许你在某处有覆盖。

文本也垂直居中：

   table.pic td{
        display:table-cell; 
        vertical-align:middle;
    }
于 2013-11-14T20:16:14.513 回答
0 
table.pic div {
        display:table-cell; 
        vertical-align:middle;
    }

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

我假设你想要

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

将表格的所有 td 元素对齐到垂直中心。

更新：

尝试覆盖任何主题规则，您可以获得更多选择性

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;
}
于 2013-11-14T19:54:45.497 回答
0

我遇到了完全相同的问题，发现这是因为我使用了 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;
}
于 2015-04-28T00:09:19.917 回答