CODEWITHSUNDEEP
htmlcsstwitter-bootstrapalignmentvertical-alignment
Konstantin Rusanov
Konstantin Rusanov

Reputation: 6554

Vertical aligment elements in bootstrap

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

Upvotes: 0

Views: 383

Answers (2)

Krzysztof
Krzysztof

Reputation: 16140

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.

Upvotes: 1

CodeBrauer
CodeBrauer

Reputation: 2925

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/

Upvotes: 1

Related Questions