CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
Alnedru
Alnedru

Reputation: 2655

Bootstrap how to center vertical

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/

Upvotes: 0

Views: 249

Answers (2)

moodyjive
moodyjive

Reputation: 1807

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");
}

Upvotes: 0

Jay Lane
Jay Lane

Reputation: 1401

try this css:

.container{
   display:table;
}

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

should work. ps. post a fiddle next time

Upvotes: 1

Related Questions