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之类的选择器，其specificity值比简单td或table td更高，因此您必须使用相同的选择器或另一个具有更高特异性值的选择器。覆盖bootstrap的默认样式：

<强> Example Here

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

Answer 2

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13; 我将vertical-align: middle;提供给td

尝试this example

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

2 个答案: