如何將<a>元素垂直放置在自舉列中？

-1

我有一種基於引導網格系統的論壇表。這是我的HTML：如何將<a>元素垂直放置在自舉列中？

<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">），以垂直居中行的內部。垂直對齊屬性不起作用。我做錯了什麼，以及如何使這項工作？

來源

2014-09-19 Jake

@BirgitMartinelle玩 - 你知道什麼是垂直的手段，如果是這樣，你知道什麼'文本對齊：中心'呢？ – j08691 2014-09-19 19:17:14

可能的杜佩：http：//stackoverflow.com/questions/13771101/centering-a-button-vertically-in-table-cell-using-twitter-bootstrap – 2014-09-19 19:21:13

也看看[垂直對齊引導3]（http ：//stackoverflow.com/questions/20547819/vertical-align-with-bootstrap-3） – 2014-09-19 21:32:24

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

嘗試設置到該行

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的元素，但是這一點，我想，是不是最好的辦法...

來源

2014-09-19 19:21:45

您需要添加垂直對齊到包含該元素的塊。試試這個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等你明白它是如何工作

來源

2014-09-19 19:24:54 Devin

如何將<a>元素垂直放置在自舉列中？

回答

相關問題