"vertical-align:middle"作为内联样式工作，但在外部 CSS 中不工作

Question

这一直困扰着我，当我尝试谷歌与该主题相关的任何内容时，我得到的只是关于vertical-align不处理div或类似元素的堆栈溢出问题。

我有这个 HTML 表，如您所见，我将每个td的样式设置为通过 HTML 内联样式属性vertical-align:middle：

<div ng-hide="getShoppingCart().length===0" class="col-md-10 col-md-offset-1">
<table class="table table-striped">
<tr>
<th class="col-md-2"></th>
<th class="col-md-3">Name</th>
<th class="col-md-2">Size</th>
<th class="col-md-2">Price</th>
<th class="col-md-2">Quantity</th>
<th class="col-md-1"></th>
</tr>
<tr ng-repeat="article in getShoppingCart()" style="height:120px;">
<!-- Image -->
<td class="col-md-2" align="center" style="vertical-align:middle;">
<img ng-src="{{article.media.images[0].smallHdUrl}}" class="img-responsive" style="height:120px;" >
</td>
<!-- Name -->
<td class="col-md-3" style="vertical-align:middle;">
<p>{{ article.name }}</p>
</td>
<!-- Size -->
<td class="col-md-2" style="vertical-align:middle;">
<p>{{ article.unit.size }}</p>
</td>
<!-- Price -->
<td class="col-md-2" style="vertical-align:middle;">
<p>£ {{ getTotalPriceForArticle($index) | number : 2 }}</p>
</td>
<!-- Quantity -->
<td class="col-md-2" style="vertical-align:middle;">
<button class="btn minusButtons" ng-click="decrementQuantity(article, $index)">–</button>
<input type="number" class="form-control" style="position:relative;top:2px;width:4vw;display:inline-block;" ng-model="getQuantities()[$index]"/>
<button class="btn plusButtons" ng-click="incrementQuantity(article, $index)">+</button>
</td>
<td class="col-md-1" align="left" style="vertical-align:middle;">
<button ng-click="removeArticleAtIndex($index)" class="btn redButtons" style="margin-left:0;">
<span class="glyphicon glyphicon-trash"></span>
</button>
</td>
</tr>
</table>
<div class="col-md-12" style="font-size:2vw; text-align:right;">
Total Price: £ {{ getTotalPrice() | number : 2 }}
</div>

所以很自然地，我认为我可以删除所有这些内联样式，并将这个全局规则添加到我的外部 CSS 文件中：

td {
vertical-align: middle;
}

但是当我这样做时，表格单元格的内容不再与中间对齐。我确定CSS文件已正确链接，因为其他元素显然受到它的影响。我还检查了 CSS 的其余部分，没有其他具有更高优先级的规则覆盖此表的此属性。有什么想法吗？

注意：正如您可能从代码中发现的那样，我正在使用 AngularJS，并且表行是使用 ng-repeat 生成的，以防它可能与问题有关。

Answer 1

这是由于引导程序以更高的特异性覆盖了这一点。 这是我在 td 的 chrome 开发者控制台中看到的：

.table>tbody>tr>td {
padding: 8px;
line-height: 1.42857143;
vertical-align: top;
border-top: 1px solid #ddd;
}

我建议做如下事情：

.table.td-vertical-center>tbody>tr>td {
vertical-align: middle;
}

然后在表元素中，您可以执行此操作：

<table class="table table-striped td-vertical-center">

这将允许您将此样式包装在默认情况下不会覆盖引导程序的自定义类中，并为其提供足够的特异性来更新表单元格。

你可以在这里看到一个引导的工作示例

Answer 2

试试这个

td, th {
vertical-align: middle !important;
}