How to center element vertically in a bootstrap column?

Question

I have a kind of forum-table based on bootstrap grid system. Here is my 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 -->

I want all these elements (<a class="col-md-7">, <span class="col-md-1"> and <div class="col-md-4">) to be vertically centered inside of the row. vertical-align property doesn't work. What am I doing wrong and how to make this work?

@BirgitMartinelle - Do you know what vertically means, and if so, do you know what `text-align: center` does? — j08691, Sep 19 '14 at 19:17
Possible Dupe: http://stackoverflow.com/questions/13771101/centering-a-button-vertically-in-table-cell-using-twitter-bootstrap — Birgit Martinelle, Sep 19 '14 at 19:21
Also have a look at [Vertical align with bootstrap 3](http://stackoverflow.com/questions/20547819/vertical-align-with-bootstrap-3) — Hashem Qolami, Sep 19 '14 at 21:32

score 0 · Answer 1 · answered Sep 19 '14 at 19:21

You need to use the css display property before use the vertical-align property.

Try to set to the row

display: table;

or put an extra div inside the row with:

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

and then to the element that you want to be verticaly centered

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

This should work. The vertical-align: middle property work only with display: table-cell

Or you can use javascript to put a margin-top to the element, but this, i think, isn't the best way...

score 0 · Answer 2 · answered Sep 19 '14 at 19:24

You need to add the vertical align to the block that contain the element. Try this CSS (it has some styling for visualization purposes):

#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 and play around so you understand how it works

How to center element vertically in a bootstrap column?

2 Answers2