Bootstrap col-md-6 align vertical centre

Question

I need to display image and video side by side in my web page. Below code works Fine except the alignment. The horizontal-center alignment is fine where as the video and images are not centered vertically, how can I solve it.

<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>

I tried the solution here vertical-align with Bootstrap 3 but not working.

@Ashley Brown Here is the fiddle https://jsfiddle.net/4kLqukLs/4/ — CodeDezk, Jul 25 '16 at 10:58

score 1 · Answer 1 · answered Jul 25 '16 at 12:12

As you didn't stated that you also want to support Internet Explorer 8 you could simply use a Flexbox layout which support vertical centering without any hassles. Flexbox is supported on all major browser including Internet Explorer 8.

Remove the min-height styles and use CSS like this:

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

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

For further reference: Flexbox introduction

score 0 · Answer 2 · answered Jul 25 '16 at 11:09

Try this, I have checked your codes and it worked fine on codepen.io but on jsFiddle it didn't, so I have added this bootstrap cdn in head section and it works fine in 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>

score 0 · Answer 3 · answered Jul 25 '16 at 11:12

0

with display: table-cell; and parent element should be display: table; you can display the content of the element vertically middle.

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

fiddle

answered Jul 25 '16 at 11:12

Nageshwar Reddy Pandem

1,059
9
15

Bootstrap col-md-6 align vertical centre

3 Answers3