вертикальное выравнивание в столбце начальной загрузки

Question

Попытка вертикально отцентрировать текст ниже.Я перепробовал многие из предложенных здесь решений, но ни одно из них не сработало.Текст всегда заканчивается на вершине 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; }
}