当Bootstrap表中有一个图像时，在中间对齐文本

Question

我有一个引导程序表，但我似乎无法让文本在中间对齐，因为图像会扩展行。

我尝试在我的CSS中将vertical-align: middle添加到.table，但它似乎没有做任何事情。

实施例

https://jsfiddle.net/DTcHh/#&togetherjs=hy7S1lFDR3

<div class="container">
<h2>Hover Rows</h2>
<p>The .table-hover class enables a hover state on table rows:</p> 
<table class="table table-hover">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
<th>Image</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
<td><img src="http://fullsoftwarepro.com/wp-content/uploads/2015/07/Radmin-       server-and-viewer-3.5-Crack-License-key-Download.jpg" width=50></td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
<td><img src="http://fullsoftwarepro.com/wp-content/uploads/2015/07/Radmin-  server-and-viewer-3.5-Crack-License-key-Download.jpg" width=50></td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
<td><img src="http://fullsoftwarepro.com/wp-content/uploads/2015/07/Radmin-server-and-viewer-3.5-Crack-License-key-Download.jpg" width=50></td>
</tr>
</tbody>
</table>
</div>

Answer 1

答案

Twitter Bootstrap有一个名为text-center的CSS类，您只需使用此类，如下所示。

试试这个：

CSS
.mid-align:before {
  content: '';
  display: inline-block;
  height: 100%; 
  vertical-align: middle;
  margin-right: -0.25em;
    
 }

HTML

<div class="container">
  <h2>Hover Rows</h2>
  <p>The .table-hover class enables a hover state on table rows:</p>
  <table class="table table-hover text-center">
    <thead>
      <tr>
        <th class="text-center">Firstname</th>
        <th class="text-center">Lastname</th>
        <th class="text-center">Email</th>
        <th class="text-center">Image</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="mid-align">John</td>
        <td class="mid-align">Doe</td>
        <td class="mid-align">john@example.com</td>
        <td><img src="http://fullsoftwarepro.com/wp-content/uploads/2015/07/Radmin-server-and-viewer-3.5-Crack-License-key-Download.jpg" width=50></td>
      </tr>
      <tr>
        <td class="mid-align">Mary</td>
        <td class="mid-align">Moe</td>
        <td class="mid-align">mary@example.com</td>
        <td><img src="http://fullsoftwarepro.com/wp-content/uploads/2015/07/Radmin-server-and-viewer-3.5-Crack-License-key-Download.jpg" width=50></td>
      </tr>
      <tr>
        <td class="mid-align">July</td>
        <td class="mid-align">Dooley</td>
        <td class="mid-align">july@example.com</td>
        <td><img src="http://fullsoftwarepro.com/wp-content/uploads/2015/07/Radmin-server-and-viewer-3.5-Crack-License-key-Download.jpg" width=50></td>
      </tr>
    </tbody>
  </table>
</div>

至于特异性，在标记内声明style属性会覆盖在*yourStyle*.css文件中写入的样式，因此在大多数情况下，在HTML元素中声明样式不是最佳做法，但它肯定是可以接受的（只是添加了一个小注释）。