Bootstrap3 - 垂直中心对齐表格内容

Question

我有一个Table结构如下.

<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引导程序使用的选择器.table>tbody>tr>td具有比简单更高的特异性值,td或者table td您必须使用相同的选择器或具有更高特异性值的另一个选择器来覆盖引导程序的默认样式:

这里的例子

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