Vertical aligment elements in bootstrap - html

Question

i'm create a little site like a app store page, and cant align all elements in the middle of div .game-dark
<div class="row">
<div class="game-dark col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="number col-lg-1 col-md-1 col-sm-1 col-xs-1">
<p>1</p>
</div>
<div class="col-lg-1 col-md-1 col-sm-2 col-xs-2">
<img src="img/kings-empire.png" alt="Kings Empire" title="Kings Empire" class="thumb img-responsive">
</div>
<div class="col-lg-8 col-md-8 col-sm-7 col-xs-5">
<h2 class="game-name">Kings Empire</h2>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-3">
<button type="button" class="btn btn-default">Скачать</button>
</div>
</div>
How i can vertical align all elements in the middle in my case?
Live example - here

Answer 1

there are multiple ways to realize this.
here a simple way:
add this to your css
.game-dark {
line-height: 100px;
}
no margin on <p>
.number p {
margin: 0;
}
set max-height to the img
.img-responsive {
min-height: 45px;
min-width: 45px;
max-height: 100px;
}
remove margin/padding of h2
h2.game-name {
margin:0;
padding: 0;
line-height: 100px
}
more ways are here http://www.vanseodesign.com/css/vertical-centering/

Answer 2

First set line-height to 98px on .game-dark.col-lg-12.col-md-12.col-sm-12.col-xs-12, and remove display: block style from image. That will align everything except second to last div. With h2 set top and bottom margin to 0, and also set line-height to 98px.