Question

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

我有这个HTML表格，如您所见，我通过HTML内联样式属性将每个td的样式设置为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

由于bootstrap以更高的特异性覆盖了它。这是我在chrome开发者控制台中看到的td＆＃39;

.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元素中你可以这样做：

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

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

您可以看到bootply here

的实际示例

Answer 2

试试这个

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

＆＃34;垂直对齐：中间＆＃34;作为内联样式，但不在外部CSS中

2 个答案: