I'm trying to vertically (and horizontally) center a div (height and width unknown) in a Bootstrap column. I can horizontally center the div by setting text-align to center. However I am struggling to vertically center the div. Here is a snippet of my code:
<div class="row">
<div class="col-md-8 col-md-offset-2 col-xs-12">
<div style="text-align: center"> <!--this works-->
<p>Content goes here</p>
</div>
</div>
</div>
Thanks in advance!
If you're using Twitter Bootstrap and you have the Bootstrap 3, they added <div class="center-block">...</div>.
Reference: Bootstrap v3.1.1.
<div class="row"> <div class="col-md-8 col-md-offset-2 col-xs-12"> <div class="center-block" style="text-align: center; vertical-align: middle;"> <!--this works--> <p >Content goes here</p> </div> </div> </div>
You may want to give this a shot:
<div class="row">
<div class="col-md-8 col-md-offset-2 col-xs-12 Outer">
<div class="Inner>
<p >Content goes here</p>
</div>
</div>
</div>
/* CSS Code */
.Outer {
border: 1px solid black; /* Just so you can see it centered vertically */
display: table-cell;
height: 100%;
min-height: 15em; /* Set to height you need */
}
.Inner > p {
vertical-align: middle;
text-align: center;
margin: 0 auto;
}
Keep in mind that the browser will automatically recognize the resolution width; however, the same functionality doesn't apply to height. You need to set a specified height on the outer element in order for the inner content to have something to vertically align itself to. Hope this helps!
