垂直居中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

回答

相關問題