Question

我有一种基于bootstrap网格系统的论坛表。这是我的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">）在行内垂直居中。 vertical-align属性不起作用。我做错了什么以及如何使这项工作？

Answer 1

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

尝试设置行

display: table;

或在行内添加一个额外的div：

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

然后到你想要以verticaly为中心的元素

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

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

或者您可以使用javascript将margin-top添加到元素中，但我认为这不是最佳方式...

Answer 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并四处游玩，让您了解它是如何运作的

如何居中<a> element vertically in a bootstrap column?</a>

2 个答案: