Question

我正在尝试将我的文本对齐在我的表中，任何引导类都可以吗？

正如您所看到的那样，文字与图标和<td>

相比有点过时了

任何快速的解决方案吗？

jsfiddle：https://jsfiddle.net/wuuf5g87/9/

的CSS：

table i {
  color: #3181cc;
  background: #ffffff;
  border-radius: 20px;
  padding: 6px 0;
  width: 30px;
  margin-right: 5px;
  border: 2px solid #e5eaee;
  text-align: center;
}

HTML：

<table class="table table-scroll table-striped" aurelia-table="">
  <thead>
    <tr>
      <th class="col-md-4">Time</th>
      <th class="col-md-4">Time of Call</th>
      <th class="col-md-4">Description</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>12:00:00<i class="fa fa-clock-o pull-right" aria-hidden="true"></i></td>
      <td>
        Call 3:00pm<i class="fa fa-clock-o pull-right" aria-hidden="true"></i>
      </td>
      <td>
        wwwwwww
      </td>
    </tr>
    <tr>
      <td>00:00:00<i class="fa fa-clock-o pull-right" aria-hidden="true"></i></td>
      <td>
        Call 7:00pm<i class="fa fa-clock-o pull-right" aria-hidden="true"></i>
      </td>
      <td>
        wwwwwww
      </td>
    </tr>
  </tbody>
</table>

Answer 1

他们只需要一点余地：

＆＃13;

table i {
  margin-top: 3px;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

<table class="table table-scroll table-striped" aurelia-table="">
  <thead>
    <tr>
      <th class="col-md-4">Time</th>
      <th class="col-md-4">Time of Call</th>
      <th class="col-md-4">Description</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>12:00:00<i class="fa fa-clock-o pull-right" aria-hidden="true"></i></td>
      <td>
        Call 3:00pm<i class="fa fa-clock-o pull-right" aria-hidden="true"></i>
      </td>
      <td>
        wwwwwww
      </td>
    </tr>
    <tr>
      <td>00:00:00<i class="fa fa-clock-o pull-right" aria-hidden="true"></i></td>
      <td>
        Call 7:00pm<i class="fa fa-clock-o pull-right" aria-hidden="true"></i>
      </td>
      <td>
        wwwwwww
      </td>
    </tr>
  </tbody>
</table>

＆＃13;

Answer 2

在你的css中添加以下css：

&http.Server

它将解决您的问题。

<强>更新

以下是您正在使用的类的更新CSS类：

.table td i {
  margin-top: 2px;
}

小提琴： http://jsfiddle.net/wuuf5g87/14/

表格中的文字对齐方式

2 个答案: