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

这里的例子

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

Answer 2

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

 <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/> <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/> <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> 

我给vertical-align: middle; 到td

试试这个例子