Bootstrap how to center vertical

Question

I have a question regarding centering row vertically!

I have here a simple html, with use of bootstrap 3:

 <div class="container">
 <div class="row">
 <div class="col-sm-12 text-center" style="padding:5 20 5 20;">
Some text text text text text .....
 </div>
 </div>
 <div class="row">
 <div class="col-sm-12">
 <div class="thumbnail">

      <img data-src="holder.js/460x308">

  </div>
 </div>
 </div>
 </div>

I would like to center this container or row ... doesn't matter.

So imagine i have a window which is 500px x 500px

I would like to pisition it in the middle of it, not on top (what is now the case) or bottom, but in center

PS: http://jsfiddle.net/e89TE/

possible duplicate of [How to center a div in a div - horizontally?](http://stackoverflow.com/questions/114543/how-to-center-a-div-in-a-div-horizontally) — Beterraba, Jan 28 '14 at 19:41

score 1 · Accepted Answer · answered Jan 28 '14 at 19:44

1

try this css:

.container{
   display:table;
}

.row{
   display: table-cell;
   vertical-align: middle;
}

should work. ps. post a fiddle next time

answered Jan 28 '14 at 19:44

Jay Lane

1,379
15
28

1

oh ok, thanks, i tried with vertical-align but didnt work i suppose because i didnt put display:table-cell – Alnedru Jan 28 '14 at 19:45
no problem, once you test and it works please mark the question as answered. – Jay Lane Jan 28 '14 at 19:47

score 0 · Answer 2 · answered Jan 28 '14 at 20:58

First thing you will need to do if you want the type on TOP of the image is make the image a background image:

<div class="col-sm-12 text-center">
    <div class="foo">
    Some text text text text text …..
    </div>
</div>

The css

.foo {
background-image:url("holder.js/460x308");
}

Bootstrap how to center vertical

2 Answers2