防止 valign='middle' 被样式表声明覆盖？答案

【问题标题】：Prevent valign='middle' from being overridden by stylesheet declaration?防止 valign='middle' 被样式表声明覆盖？
【发布时间】：2011-10-09 18:09:33
【问题描述】：

我有一张这样的桌子：

<table>
<tr><td valign='middle'><a href='#'>Link</a></td><td><img src='img.png'></td></tr>
</table>

还有这样的样式表：

a {
  vertical-align: baseline;
}

td a {
  vertical-align: default;
}

我试图让我的链接垂直对齐，但由于我最初的 vertical-align: baseline 声明（我无法更改），valign 属性被忽略。我想在td a 选择器下的样式表中解决这个问题。我该如何解决这个问题？

（我正在 Chrome 12 中对此进行测试）

【问题讨论】：

标签： html css html-table alignment vertical-alignment

【解决方案1】：

删除valign="middle"，然后在样式表中执行：

td a {
    vertical-align: middle;
}

因为您问的是如何“删除”声明。你不能删除它，但你可以覆盖它：

a {
     vertical-align: middle;
}

将替换样式表中的先前声明。

【讨论】：

这行得通（谢谢！）——我会尽快接受你的回答——但是样式表中是否有“擦除”先前声明的属性？如果没有任何垂直对齐规范，它与valign="middle" 属性值一起工作得很好。否则我有看似无法修复的问题。
你不能删除一个属性，只需要设置别的......
恕我直言，最好只使用 CSS 并远离 HTML 中的属性。我将编辑我的答案以显示如何覆盖 a 标签上的默认值

【解决方案2】：

您遇到的奇怪问题是 according to Sitepoint，vertical-align 的默认值是 baseline，因此您的规则 a { vertical-align: baseline } 应该没有任何效果。是否有任何其他 CSS 应用于链接？

在现代浏览器（如 Chrome 12）中，您可以尝试：

td[valign="middle"] {
    vertical-align: middle;
}

【讨论】：

不应该应用任何其他样式，但我会检查一下并回复您。感谢您的帮助
@beanland：参见例如jsfiddle.net/pauldwaite/JD9wg/1——这个渲染是不是你期望的样子？