html - Bootstrap3 - 垂直居中对齐表格内容

Question

我有一个表结构如下。

<div class="table-responsive">
    <table class="table table-striped table-hover">
        <thead>
            <tr>
                <th>Name</th>
                <th>Type</th>
                <th class="actions">Actions</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    <div class="event-object">
                        <a href="#" class="pull-left">
                            <img src="images/event-small.jpg" width="48" height="48" alt="Event Name">
                        </a>
                        <div class="event-info">
                            <h5 class="event-heading">Bangalore Fashion Week</h5>
                            <p>Sheraton, Bangalore</p>
                        </div>
                    </div>
                </td>
                <td>Conference</td>
                <td>
                    <div class="table-controls"> 
                        <a href="#" class="btn btn-xs btn-default">
                            <i class="fa fa-pencil"></i>
                        </a> 
                        <a href="#" class="btn btn-xs btn-default">
                            <i class="fa fa-times"></i>
                        </a> 
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</div>

由于第一列的高度较大，我希望其他表格列垂直居中，以便在表格中具有良好的无缝外观。

Answer 1

你可以给vertical-align: middle;到表格单元格。然而，由于 Twitter Bootstrap 使用像 .table>tbody>tr>td 这样的选择器，它具有更高的 specificity。 value 而不是简单的 td 或 table td 您必须使用相同的选择器或另一个具有更高特异性值的选择器来覆盖 Bootstrap 的默认样式:

Example Here

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