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％。 e.g。

<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列中的垂直对齐方式

1 个答案: