CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3vertical-alignment
Kitson
Kitson

Reputation: 1283

Vertical align a div on the page (using bootstrap?)

I'm trying to align a div within my page so that it sits directly in the centre at all times. I've searched the site, but can't see any solutions for centring in the page rather than just a div.

Using bootstrap (3.2.0) I can centre it horizontally, but not vertically!

Here is my code so far:

HTML

<div class="slide">
    <div class="container">
        <div class="row">
             <div class="logo col-md-4 col-md-offset-4">
                 <p>Test</p>
             </div>
        </div>
    </div>
</div>

CSS

.logo {
border: solid;
border-color: red;
border-width: 5px;
height: 200px;
}

I tried verticle-align: middle;, margin:auto; & margin-top:auto; margin-bottom:auto; to no effect.

The closest I can get is to use margin-top: 20%; but this doesn't shrink as the page height does.

Upvotes: 1

Views: 1174

Answers (1)

Rice Junkie
Rice Junkie

Reputation: 186

There is no magical way in bootstrap to do it. You need a helper div wrapper in order to immolate a table structure. 

<div class="slide">
<div class="container">
    <div class="row">
         <div class="logo col-md-4 col-md-offset-4">
             <div class="helper">
                 <span>Test</span>
             </div>
         </div>
    </div>
</div>
</div>

.logo {
 border: solid;
 border-color: red;
 border-width: 5px;
 height: 200px;
}
.helper{
background:#ccc;
width:100%;
height:100%;
text-align:center;
display:table;
}
span{
display:table-cell;
vertical-align:middle;
}

Upvotes: 3

Related Questions