bootstrap 列内的垂直对齐

Question

正在尝试将下面的文本垂直居中。我已经尝试了这里提供的许多解决方案，但 none 都奏效了。文本总是在 div 的顶部结束。我已经尝试了几十种解决方案。

<section id="services" class="services-section">
<div class="container">
<br />
<div class="row " style="background-color:#ffffff; margin:20px; padding:10px;">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 brown-background service-img"><img class="img-responsive" src="images/Siding.png" /></div>
  <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
  <h2>Siding Wash</h2><p>Some home maintenance tasks are just right for the do-it-yourselfer, power washing your siding is not one of those tasks. A simple miscalculation could cause significant damage to your siding requiring an expensive repair. Phantom Power Washing has the know how to gently remove grim from your home’s exterior and reveal it’s original beauty.</p>
  </div>
  </div>

.services-section {
height: 100%;
width: 100%;
background: #52402c;
text-align: center;
padding: 5px 5px 5px 5px;        
}

Answer 1

您可以将要垂直居中的内容包裹在 div 中，并将其位置设置为绝对位置并将顶部填充设置为 50%。例如

<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12" >
                    <div class="sidingCopy">
                    <h2>Siding Wash</h2><p>Some home maintenance tasks are just right for the do-it-yourselfer, power washing your siding is not one of those tasks. A simple miscalculation could cause significant damage to your siding requiring an expensive repair. Phantom Power Washing has the know how to gently remove grim from your home’s exterior and reveal it’s original beauty.</p>
                    </div>
                </div>

CSS:

@media(min-width:768px) {
.sidingCopy { position: absolute; padding: 50% 0 0 0; }
}

bootstrap 列内的垂直对齐

vertical alignment within bootstrap column

vertical-alignment

twitter-bootstrap-3