Reputation: 145
I am using vertical-align: middle
to center my content as shown below.
It works great when both halves are side by side, but when my columns are stacked when in mobile view, the content no longer stays centered in the middle. It looks like this when stacked.
I want the content to stayed centered vertically whether you're viewing it on a desktop or mobile. For whatever reason vertical-align: middle
isn't working when my columns stack. Is there anything I can add to my css to fix this?
HTML:
<!-- Families -->
<div id="families">
<div class="container-fluid">
<div class="row text-center center-row">
<div class="col-md-6 col-md-push-6 fam-col-left">
<h2>Families & Individuals</h2>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus earum dolorum sapiente quod, voluptas optio, ducimus nemo rerum commodi porro laudantium nam. Veritatis ex enim culpa voluptatem, corporis? Distinctio, obcaecati.</p>
</div>
<div class="col-md-6 col-md-pull-6 fam-col-right">
<ul class="list-unstyled">
<li><i class="fa fa-map-o fa-fw fa-1x"></i><a href="#"> Wealth Management</a></li>
<li><i class="fa fa-pie-chart fa-fw fa-1x"></i><a href="#"> Asset Allocation</a></li>
<li><i class="fa fa-anchor fa-fw fa-1x"></i><a href="#"> Insurance Risk Assessments</a></li>
<li><i class="fa fa-graduation-cap fa-fw fa-1x"></i><a href="#"> Education Funds Planning</a></li>
<li><i class="fa fa-calendar-check-o fa-fw fa-1x"></i><a href="#"> Retirement Planning</a></li>
<li><i class="fa fa-area-chart fa-fw fa-1x"></i><a href="#"> Investments</a></li>
</ul>
<a class="btn btn-primary" href="#" role="button"><i class="fa fa-angle-double-right fa-align-center fa-fw fa-1x"></i>Learn More</a>
</div>
</div> <!-- end row -->
</div> <!-- end container-fluid -->
</div> <!-- end families -->
CSS:
.center-row {
display: table;
}
#families {
margin-bottom: -30px;
}
.fam-col-left {
background: url('../img/spark.jpg');
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
height: 550px;
color: #FCFFF5; /*white*/
display: table-cell;
vertical-align: middle;
float: none;
}
.fam-col-left p {
font-size: 16px;
width: 50%;
margin: 0 auto;
}
.fam-col-right {
display: table-cell;
vertical-align: middle;
float: none;
}
.fam-col-right li {
padding-bottom: 20px;
font-size: 16px;
}
@media (max-width:768px) {
.center-row {
display: block;
}
.fam-col-right, .fam-col-left {
width:100%;
display:inline-block;
}
}
Upvotes: 0
Views: 119
Reputation: 7096
Trying to vertically center a block element using vertical-align: middle
is not completely effective, since that's not the intended job for vertical-align
. It's intended to be used on inline elements, like a <span>
. For a block level element (like <div>
or <p>
), there are better alignment tools.
Here's some stripped-down code showing one simple technique that will vertically align a block element inside another block element:
CSS:
.valign-wrapper {
position: relative;
text-align: center;
height: 550px;
}
.valign-middle {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
HTML:
<div class="valign-wrapper">
<img src="http://lorempixel.com/image_output/city-q-g-764-550-6.jpg">
<div class="valign-middle">
<h2>Families & Individuals</h2>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus earum dolorum
sapiente quod, voluptas optio, ducimus nemo rerum commodi porro laudantium nam.
Veritatis ex enim culpa voluptatem, corporis? Distinctio, obcaecati.</p>
<ul class="list-unstyled">
<li><i class="fa fa-map-o fa-fw fa-1x"></i><a href="#"> Wealth Management</a></li>
<li><i class="fa fa-pie-chart fa-fw fa-1x"></i><a href="#"> Asset Allocation</a></li>
<li><i class="fa fa-anchor fa-fw fa-1x"></i><a href="#"> Insurance Risk Assessments</a></li>
<li><i class="fa fa-graduation-cap fa-fw fa-1x"></i><a href="#"> Education Funds Planning</a></li>
<li><i class="fa fa-calendar-check-o fa-fw fa-1x"></i><a href="#"> Retirement Planning</a></li>
<li><i class="fa fa-area-chart fa-fw fa-1x"></i><a href="#"> Investments</a></li>
</ul>
<a class="btn btn-primary" href="#" role="button">
<i class="fa fa-angle-double-right fa-align-center fa-fw fa-1x"></i>Learn More</a>
</div> <!-- /valign-middle -->
</div> <!-- /valign-wrapper -->
Results (red border shows the valign-middle
div):
And a working jsfiddle.
Upvotes: 1