css – 在表格单元格中垂直放置一个按钮,使用Twitter Bootstrap

前端之家收集整理的这篇文章主要介绍了css – 在表格单元格中垂直放置一个按钮,使用Twitter Bootstrap前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我使用Twitter Bootstrap,并尝试在表格单元格中居中一个按钮。我真的需要它垂直居中。
<table class="table table-bordered table-condensed">
  <tbody>
    <tr>
      <td><a href="#" class="btn btn-primary"><i class="icon-check icon-white"></i></a></td>
      <td><a href="#">Todo Item One</a><br /><span class="label label-success">One thing</span></td>
    </tr>
  </tbody>
</table>

请看我的JSFiddle的问题。我试过几个表中心技巧我知道,但没有一个似乎工作正常。有任何想法吗?提前致谢。

更新:是的,我试过vertical-align:middle;,如果它是内联,但不是如果它在一个类td有。更新了JSFiddle以反映这一点。

最后更新:我是一个白痴,并没有检查,看看是否被bootstrap.css覆盖

解决方法

FOR BOOTSTRAP 3.X:

感谢@GabbrielGRoy:

Bootstrap现在具有表单元格的以下样式:

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

方法添加一个自己的类,使用相同的选择器:

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

然后将它添加到您的tds:

<td class="vert-align"></td>

FOR BOOTSTRAP 2.X

有Bootstrap no way to do this

当在表单元格中使用vertical-align时,大多数人期望它,这是为了模仿(旧的,已弃用的)valign属性。在现代的,符合标准的浏览器中,以下三个代码段执行相同的操作:

<td valign="middle"> <!-- but you shouldn't ever use valign --> </td>
<td style="vertical-align:middle"> ... </td>
<div style="display:table-cell; vertical-align:middle"> ... </div>

检查您的fiddle updated

进一步

> vertical-align: middle with Bootstrap 2
> Understanding vertical-align
> vertical alignment of elements in a div

另外,你不能使用.vert引用td类,因为Bootstrap已经有这个类:

.table td {
   padding: 8px;
   line-height: 20px;
   text-align: left;
   vertical-align: top; // The problem!
   border-top: 1px solid #dddddd;
}

并且在’.vert’类中重载vertical-align:middle,所以你必须将这个类定义为td.vert。

猜你在找的CSS相关文章