css - 取消垂直对齐属性

Question

有没有办法取消或克服垂直对齐属性？

我有一个网站，其样式表包含以下 CSS:

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, font, 
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, table, caption, 
tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, 
figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, 
video {
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align: baseline;
    background: transparent;
}

由于此样式属性，我在页面上插入了一个表格，其内容以一种奇怪的方式显示(这意味着如果我在 Chrome 开发人员工具中取消选中“vertical-align: baseline”，它会完全按照我的要求显示).

如何在我的页面上复制它？

谢谢!

Answer 1

这是一个有趣的问题，因为它涉及到浏览器的默认样式表。

如果您查看规范 (http://www.w3.org/TR/CSS21/sample.html) 中给出的默认样式表，您会看到以下内容:

thead, tbody,
tfoot           { vertical-align: middle }
td, th, tr      { vertical-align: inherit }

因此，默认行为是表格单元格的内容在表格单元格中垂直居中。

在您的样式表中，您将 vertical-align 属性设置为 baseline对于 tbody , tfoot , thead , tr , th和 td影响您的表格布局的元素。

您需要调整重置 vertical-align 属性的 CSS 规则，或者根据需要为表格样式添加其他规则。

在您的示例中，您可以简单地在您的之后添加上面给出的两个规则 原始规则。

或者，从原始规则集中删除 vertical-align 属性。

更具体地说，按如下方式更改您的 CSS 样式表:

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, font, 
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, table, caption, 
tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, 
figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, 
video {
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align: baseline;
    background: transparent;
}
thead, tbody, tfoot { vertical-align: middle } /* add this rule*/
td, th, tr { vertical-align: inherit } /* add this rule */

通过添加两个附加规则。