如何在引导列中垂直居中 <a> 元素？答案

【问题标题】：How to center <a> element vertically in a bootstrap column?如何在引导列中垂直居中 <a> 元素？
【发布时间】：2014-09-19 19:12:53
【问题描述】：

我有一种基于引导网格系统的论坛表。这是我的 HTML：

<div id=questions-table>
  <div class="row">
     <a href="question" class="col-md-7">This is forum question</a>
     <span class="col-md-1">25 answers</span>
     <div class="col-md-4" id=last-reply>
       <img data-src="holder.js/60x60"/img>
       <span id=author>Alexander</span>
       <span id=date>22 september 2014</span>
     </div> <!-- end col-md-4 -->
  </div><!-- end row -->
</div> <!-- end questions-table -->

我希望所有这些元素（<a class="col-md-7">、<span class="col-md-1"> 和 <div class="col-md-4">）在行内垂直居中。垂直对齐属性不起作用。我做错了什么以及如何使这项工作？

【问题讨论】：

@BirgitMartinelle - 你知道垂直是什么意思吗？如果知道，你知道text-align: center 是做什么的吗？
可能的欺骗：stackoverflow.com/questions/13771101/…
也看看Vertical align with bootstrap 3

标签： html css twitter-bootstrap

【解决方案1】：

您需要在使用vertical-align 属性之前使用css display 属性。

尝试设置到行

display: table;

或在行内放置一个额外的 div：

height: 100%;
width: 100%;
display: table;

然后到要垂直居中的元素

display: table-cell;
vertical-align: middle;

这应该可以。 vertical-align: middle 属性仅适用于 display: table-cell

或者您可以使用 javascript 为元素添加 margin-top，但我认为这不是最好的方法...

【讨论】：

【解决方案2】：

您需要将垂直对齐添加到包含该元素的块中。试试这个 CSS（它有一些用于可视化目的的样式）：

#questions-table {
    background:#fc0;
    padding:20px;
}
#questions-table .row {
    background:#ccc;
    vertical-align:middle;
    padding:100px 0;
}
.col-md-7, .col-md-4, .col-md-1 {
    background:#369;
    padding:10px;
    display:inline-block;
}

See fiddle here 并尝试一下，以便您了解它是如何工作的

【讨论】：