I've got a section that I am trying to vertical align middle the text on. I've tried adding it to the `` code, but it causes the text and images to stack on top of one another. It aligns fine until I resize .payment-cards li in the css from 40px to 100px.
This code was modified from your demo-ecommerce page:
div class="section dark notopborder nomargin">
<div class="container clearfix">
<div class="row payments-info">
<div class="col-md-7">
<h3 class="lead nomargin">Award WINNING Family Destination</h3>
</div>
<div class="col-md-5">
<ul class="payment-cards clearfix" style="margin-top: 5px;">
<li><img src="images/award-1.png" alt="Visa" /></li>
<li><img src="images/award-2.png" alt="Master Card" /></li>
<li><img src="images/award-3.png" alt="American Express" /></li>
</ul>
</div>
</div>
</div>
</div>
This css was specific to this section of the ecommerce page:
.payment-cards {
list-style: none;
text-align: center;
margin: 0;
}
.payment-cards li {
display: inline-block;
margin: 0 5px;
width: 100px;
}
@media (max-width: 991px) {
.payments-info { text-align: center; }
.payment-cards {
margin-top: 40px;
text-align: center;
}