Bootstrap col-md-6 align vertical center

Question

Мне нужно отображать изображение и видео рядом на моей веб-странице. Ниже код работает Прекрасно, кроме выравнивания. Выравнивание по горизонтальному центру отлично, когда видео и изображения не центрированы по вертикали, как я могу его решить.

<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, но не работает.

Answer 1

Попробуйте это, я проверил ваши коды, и он отлично работал на codepen.io, но на jsFiddle это не так, поэтому я добавил этот bootstrap 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> 

Answer 2

с display: table-cell; и родительским элементом должен быть display: table; можно отобразить содержимое элемента вертикально среднего.

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

fiddle

Answer 3

Как ты не сказал, что вы хотите поддерживать 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