取消垂直对齐 属性

Cancel vertical-align property

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

我有一个网站,其样式表包含以下内容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;
}

我在页面上插入了一个 table,由于这种样式 属性 其内容以一种奇怪的方式显示(这意味着如果我在 [=24] 中取消选中 "vertical-align: baseline" =] 开发者工具,它完全符合我的要求)。

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

谢谢!

请检查CSS vertical-align property default 因为无论如何默认值都是基线。 但是,您可以将其从 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, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {

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

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

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

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

在您的样式 sheet 中,您将 tbodytfoot、[=15= 的垂直对齐 属性 设置为 baseline ]、trthtd 元素,这会影响您的 table 布局。

您需要调整 CSS 重置垂直对齐的规则 属性 或根据需要为 table 样式添加其他规则。

在你的例子中,你可以简单地在你的后面添加上面给出的两个规则 原始规则。

或者,从原始规则集中删除垂直对齐 属性。

更具体地说,按如下方式更改 CSS 样式 sheet:

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

通过添加两个附加规则。

您无法取消 属性。根据 CSS 原则,每个元素都具有 CSS 中定义的所有属性(尽管并非所有属性都会影响元素的呈现)。

您也不能告诉浏览器以 sheet 风格忽略以另一种风格 sheet 出现的 CSS 规则。您只能输入自己的设置,然后它们将参与级联并可能因此覆盖其他设置。

无法知道浏览器默认样式 sheet、用户样式 sheet 和其他页面样式 sheet 中可能存在哪些 CSS 设置秒。确保事情像 CSS 规则不存在一样工作的唯一方法是实际删除规则。这就是为什么“CSS 重置”规则集风险如此之大的原因之一。

如果您被迫在存在某些“CSS 重置”并且无法删除或更改的环境中工作,您可能需要详细研究它们可能会覆盖哪些默认设置。不能保证这会成功,因为浏览器可以自由选择默认样式 sheets 中的任何内容。但是 可能 重要的设置是在 HTML5 部分 Rendering 中描述和或多或少推荐的设置。它描述了以下内容:

sub { vertical-align: sub; }
sup { vertical-align: super; }
thead, tbody, tfoot, table > tr { vertical-align: middle; }
tr, td, th { vertical-align: inherit; }

...和根据 CSS 定义 valign 属性的一些设置,以及新的 meterprogress 元素的一些特殊规则.

因此,vertical-align: baseline 可能会导致多个默认渲染功能被覆盖。您需要分析它们中的哪些适用,并确保将 vertical-align 设置为适合重要元素的值。

由于无法取消垂直对齐 属性,如果没有它,您的网站会正确呈现吗?比如修改边距、填充和边框? 边距:1px 1px 1px 1px; (或类似的东西)....

一个描述性很强的网站,提供关于这些的信息: http://www.w3.org/TR/CSS21/box.html

此站点提供有关基线和垂直对齐的信息: http://dev.w3.org/csswg/css-text-3/

我也在使用样式表中具有相同 "reset" 的 wordpress 模板。 我不想简单地重置我的子样式表中的重置——根据令人费解的 css,可能会导致无数错误。 相反,在我的 "child" 样式表中,我添加了一个 class 并定义了带有 class 的项目中的任何 table 元素将与中间垂直对齐:

.masthead-table table, caption, tbody, tfoot, thead, tr, th, td {
    vertical-align: middle;
}

然后在它实际出现的页面中,我给了包含 table 的 div 其正确的 class:

<div class="masthead-table">
  <table>
    <tr>
      <td>
        voila, my middle-v-aligned content
      </td>
    </tr>
  </table>
</div>