垂直居中div div

我想垂直居中邮政标题，Byline和注释在父div中。垂直居中div div

我所做的一切只是在线条或中心之间放置太多的空间，只能水平放置。欣赏任何指导。

<div class="container main"> 
 
    <div class="row"> 
 
    <div class="col-xs-12 col-sm-7"> 
 
     <div id="latest" class="img-responsive"> 
 
     <div class="SeeMore"> 
 
      <p class="play"> 
 
      See More 
 
      </p> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 
    <div class="outer"> 
 
     <div class="inner"> 
 
     <div class="col-xs-12 col-sm-5"> 
 
      <h3 class="latest-title"> post title </h3> 
 
     </div> 
 

 
     <div class="col-xs-12 col-sm-5"> 
 
      <h6 class="byline"> Author: Sheila Date:</h6> 
 
     </div> 
 

 
     <div class="col-xs-12 col-sm-5 comments"> 
 
      <span class="glyphicon glyphicon-user"></span> 
 
     </div> 
 
     </div> 
 

 
    </div> 
 
    </div> 
 
</div>

来源

2016-01-24 cleverettgirl

他们看起来漂亮我与我保持一致。 – MortenMoulder

我希望他们在盒子中间。 – cleverettgirl

在这种情况下，我们需要查看其余的CSS。通过这样做，我们需要改变很多东西，所以请张贴您的CSS。 – MortenMoulder

你可以使用柔性

.inner { 
    text-align: center; 
} 
.outer { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    height: 500px; 
}

来源

2016-01-24 01:19:15 user2182349

这将是为垂直对齐并且是在中心为您提供了

<div class="container main" style="text-align: center;"> 
     <div class="row" style="position: absolute; left: 50%; text-align: left;"> 
     <div class="col-xs-12 col-sm-7"> 
      <div id="latest" class="img-responsive"> 
      <div class="SeeMore"> 
       <p class="play"> 
       See More 
       </p> 
      </div> 
      </div> 
     </div> 

     <div class="outer" style="text-align: left;"> 
      <div class="inner"> 
      <div class="col-xs-12 col-sm-5"> 
       <h3 class="latest-title"> post title </h3> 
      </div> 

      <div class="col-xs-12 col-sm-5"> 
       <h6 class="byline"> Author: Sheila Date:</h6> 
      </div> 

      <div class="col-xs-12 col-sm-5 comments"> 
       <span class="glyphicon glyphicon-user"></span> 
      </div> 
      </div> 

     </div> 
     </div> 
    </div>

代码速战速决

来源

2016-01-24 04:59:42 Dinesh

垂直居中div div

回答

相关问题