引导col md-6垂直居中对齐

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

因为你没有声明你也想支持Internet Explorer8，你可以简单地使用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

Answer 2

试一下，我已经检查了你的代码，它在codepen.io上运行良好，但在jsFiddle上却不行，所以我在head部分添加了这个引导程序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 3

有了display: table-cell;和父元素应该是display: table;，你可以在中间垂直显示元素的内容。

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

fiddle