Bootstrap col-md-6對齊垂直中心

我需要在我的網頁中並排顯示圖像和視頻。下面的代碼工作正常，除了對齊。水平中心對齊方式很好，因爲視頻和圖像不是垂直居中的，我該如何解決它。Bootstrap col-md-6對齊垂直中心

<div class="container-fluid text-center" style="padding-top:100px;"> 
     <div class="row" > 
      <div class="col-md-6 " style="background-color:#000;min-height:700px;"> 
       <video id="video_id" width="100%" height="100%" controls="controls" align="middle" > 
        <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/ogg"> 
        Your browser does not support the video tag. 
       </video> 
      </div> 
      <div class="col-md-6 vcenter" style="background-color:#999;min-height:700px;"> 
       <img id ="detected_id" src="assets/images/src.jpg" width="100%" height="100%"> </img> 
      </div> 
     </div> 
    </div>

我試過這裏的解決方案vertical-align with Bootstrap 3但不工作。

來源

2016-07-25 CodeDezk

燦你創建一個小提琴？ – ProEvilz

你的圖片尺寸是多少？ –

圖片尺寸爲900x600 – CodeDezk

試試這個，我檢查了你的代碼，它在codepen.io上工作正常，但在jsFiddle它沒有，所以我在頭部添加了這個引導cdn，它在md (i.e. on desktop screen resolution)中工作正常。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> 


<div class="container-fluid text-center" style="padding-top:100px;"> 

    <div class="row" > 

    <div class="col-md-6 " style="background-color:#000;min-height:700px;"> 
       <video id="video_id" width="100%" height="100%" controls="controls" align="middle" > 
        <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/ogg"> 
        Your browser does not support the video tag. 
       </video> 
      </div> 

    <div class="col-md-6 vcenter" style="background-color:#999;min-height:700px;"> 
       <img id ="detected_face_id" src="assets/images/mac.jpg" width="100%" height="100%"> 
      </div> 

    </div>

來源

2016-07-25 11:09:05 frnt

與display: table-cell;和父元素應該是display: table;可以顯示元素垂直方向的中間的內容。

.row{ 
    display: table; 
} 
.vcenter{ 
    display: table-cell; 
    vertical-align: middle; 
}

fiddle

來源

2016-07-25 11:12:49

當你沒有說你也想支持Internet Explorer 8，你可以簡單地使用其支持垂直中心沒有任何麻煩一Flexbox的佈局。 Flexbox將支持所有主要的瀏覽器包括Internet Explorer 8

取出min-height風格和使用CSS這樣的：

.row { 
    display: flex; 
} 
.row .col-md-6 { 
    align-self: center 
}

https://jsfiddle.net/4kLqukLs/7/

更多參考：Flexbox introduction

來源

2016-07-25 12:12:52 Kovah

Bootstrap col-md-6對齊垂直中心

回答

相關問題