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

我在页面上插入了一个表格，其内容以一种奇怪的方式显示，因为这种样式属性（意味着如果我取消选中＆＃34; vertical-align：baseline＆＃34;在Chrome开发人员工具中，它会显示确切地说我想要的方式。）

如何在我的页面上重现？

谢谢！

Answer 1

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

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

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

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

在您的样式表中，您要为baseline，tbody，tfoot，thead，{{}将vertical-align属性设置为tr 1}}和th元素，这会影响您的表格布局。

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

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

或者，省略原始规则集的vertical-align属性。

更具体地说，更改CSS样式表，如下所示：

td

添加两个附加规则。

Answer 2

我也在使用wordpress模板，并使用相同的＆＃34;重置＆＃34;在样式表中。我不想简单地重置我的子样式表中的重置 - 基于复杂的css可能导致的无数错误。相反，在我的孩子＆＃34;样式表，我添加了一个类，并定义了一个项目中的任何表格元素与该类别垂直对齐：

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

然后在它实际出现的页面中，我给包含该表的div正确的类：

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

Answer 3

您无法取消财产。根据CSS原则，每个元素都具有CSS中定义的所有属性（尽管并非所有属性都会影响元素的渲染）。

在样式表中，您无法告诉浏览器忽略出现在另一个样式表中的CSS规则。您只能投入自己的设置，然后他们将参与级联，从而可能会覆盖其他设置。

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

如果您被迫在某些“CSS重置”存在且无法删除或更改的环境中工作，您可能需要详细研究它们可能会覆盖哪些默认设置。无法保证这是成功的，因为浏览器可以在默认样式表中随意添加任何内容。但可能重要的设置是HTML5中{@ 3}}部分中描述和或多或少建议的设置。它描述了以下内容：

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

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

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

Answer 4

由于无法取消vertical-align属性，您的网站会在没有它的情况下正确呈现吗？比如修改边距，填充和边框？保证金：1px 1px 1px 1px; （或类似的东西）....

有关这些信息的非常具有描述性的网站： http://www.w3.org/TR/CSS21/box.html

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

Answer 5

请检查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 {

取消vertical-align属性

5 个答案: