Center-aligned Bootstrap column with a width of 50% and centered vertically

I am looking to have images and videos displayed side by side on my webpage. The code below functions properly, however there is an issue with the alignment. While the horizontal center alignment is correct, the video and images are not centered vertically. How can I rectify this?

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

Although I attempted a solution found here regarding vertical-align with Bootstrap 3, unfortunately it did not work as expected.

htmlcsstwitter-bootstrap

Answer №1

If supporting Internet Explorer 8 is not a requirement, you can easily achieve vertical centering using a Flexbox layout without any complications. Flexbox is compatible with all major browsers, including Internet Explorer 8.

Simply remove the min-height styles and replace them with CSS like this:

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

Check out this JSFiddle for an example

For more information, visit this link: Flexbox introduction

Answer №2

After reviewing your code, I found that it worked well on codepen.io but not on jsFiddle. To fix this, I included the Bootstrap CDN in the header section and now it functions properly on desktop screen resolutions.

<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

By using the CSS property display: table-cell; within a parent element styled with display: table;, you can vertically align the content of the element to the middle.

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

Check out this example on JSFiddle

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Create a pair of divs on your webpage that users can drag around using HTML5

Hello to all HTML5 developers! I am currently facing an issue where I am attempting to designate two separate divs as dragable areas for incoming files. Unfortunately, it seems that only one of them can be active at a time. How can I adjust my code so th ...

javascripthtmldojo

How can Bootstrap be utilized for Image Overlay?

I'm currently using bootstrap and have a 3x3 grid of 200x200 images. I've searched everywhere for a solution to add an overlay, but haven't had any luck so far. I'm still new to coding and trying to figure things out. I saw on Serenbe. ...

htmlcssoverlay

Utilizing pure CSS to target the first and last classes

I want to use pure CSS to select only the first and last classes throughout the entire document. In my scenario, the structure looks like this: <div class="Container"> <div> <div class="Parent"></div> <pre> ...

csscss-selectors

What is the best way to vertically align the dropdown button with the other text boxes?

I'm currently utilizing a basic bootstrap template from getbootstrap.com. I am having trouble properly aligning the account type dropdown in this section. Additionally, the dropdown list items are not correctly aligned with the dropdown button. Any as ...

htmlcsstwitter-bootstrap

What is the method used to calculate the heights of flex items when the flex-direction property is set to column?

I'm currently grappling with the concept of flexbox layout and have been exploring the flex-direction: column option. HTML <div class="container"> <div class="item"> Lorem ipsum dolor sit amet consectetur a ...

htmlcssflexbox

Encountering a problem with the persistent JavaScript script

I have implemented a plugin/code from on my website: Upon visiting my website and scrolling down, you will notice that the right hand sidebar also scrolls seamlessly. However, when at the top of the screen, clicking on any links becomes impossible unless ...

javascripthtmlcss

Chrome and Firefox: Images cling together

I've encountered an issue with my recently launched website. Some images in a grid appear to be stuck together, but this problem only occurs in Firefox and Chrome browsers. Oddly enough, zooming in to around 110% then back to 100% seems to temporarily ...

javascriptcsswordpressgoogle-chromefirefox

How can I troubleshoot an image not appearing in Bootstrap within a Laravel Blade file while using PHPStorm?

Forgive me if this sounds like a silly question: I attempted to use the following src attribute in an img tag to show an image on a website created with Bootstrap, while using phpstorm with a laravel blade file: src="C:\Users\MAHE\Pictures&b ...

htmlcsstwitter-bootstraplaravel-5laravel-blade

Making a switch from one image to another - JavaScript

I need a solution to swap out an image that is used in multiple locations on a webpage. Consider this sample HTML page: <html> <head> </head> <body> <img id="1" src="example.com/img/1889.png"> <d ...

javascripthtmlcss

Finding dynamic elements with Selenium WebDriver is an essential skill for any automation tester

<div id="button" data-testid="widgetButton" class=" chat-closed mobile-size__large"> It seems there is an issue with locating elements that have special characters in their names. I'm attempting to click on a specific item, but I've tried ...

javahtmlseleniumselenium-webdriverselenium-ide

Tips for showing the value in the subsequent stage of a multi-step form

Assistance is required for the query below: Is there a way to display the input field value from one step to the next in multistep forms? Similar to how Microsoft login shows the email in the next step as depicted in the image below: ...

javascriptphphtmlcss

Arranging text in alignment on a single line with Vuetify

I am attempting to format text in a way that it is aligned with part on the left side of the card and the other part on the right (with space between them). However, when using class="text-right", the text gets moved down. Does anyone have any ideas on h ...

cssvue.jsvuetify.js

Is it necessary for two sibling elements to be of the same type in order for their margins to collapse together?

I am currently working on enhancing the visual appearance of a Bootstrap 4 card and encountered an issue: https://i.stack.imgur.com/p8Qzhm.png The spacing between the About the gig heading and the top Date item appears to be uneven. I would like to make ...

htmlcssmargin

Imitate adjustment of orientation without the need to resize the browser window

Is there a way to simulate page portrait orientation on a PC browser without resizing the window? In my HTML code, I have a <div> element that displays content dynamically based on screen orientation. Is it possible to use JavaScript to trick this & ...

javascripthtmlcss

It is important for the button size to remain consistent, regardless of any increase in text content

My goal was to keep the button size fixed, even as the text on it grows. This is the current code I am using: .button { border: none; color: white; padding: 10px 50px; text-align: center; text-decoration: none; display: inline-block; font ...

javascripthtmlcss

Submenu animation that "bursts onto the scene"

I'm facing an issue with my menu that has sub-items inside it. To achieve the animation effect I desire, I need to extract the width, height, and first-child's height of the sub-menu. While my animation is working most times, there are instances ...

javascriptjqueryhtmlcssanimation

Navigating the web page and locating the appropriate Xpath element to extract

Here is the HTML that needs to be extracted: <input type="hidden" id="continueTo" name="continueTo" value="/oauth2/authz/?response_type=code&client_id=localoauth20&redirect_uri=http%3A%2F%2Fbg-sip-activemq%3A8080%2Fjbpm-console%2Foauth20Callbac ...

htmlregexseleniumxpathselenium-webdriver

When an element is set to a fixed position while scrolling, it causes the element to flicker

After implementing the jQuery plugin stickyjs on my website, I noticed a strange issue. While it works perfectly fine on my Mac, when using the mouse scroll wheel on my PC, the element blinks once rapidly as it reaches the top of the page. Interestingly, d ...

jqueryhtmlcsssticky

What exactly is the function of $fix-mqs within the IE Sass mixins created by Jake Archibald?

I'm really struggling to understand the purpose behind using $fix-mqs in the mentioned link: Although I can grasp how the rest of the mixin functions, this particular part has me stumped. In a project where I've utilized this pattern, everything ...

cssinternet-explorersass

What is the best way to ensure that the output responds to the function?

I have a total value output that needs to decrease when a checkbox is unchecked. The current function I have for unchecking the box is not working as expected. Jquery Total value calculation: $(document).ready(function() { var initialTotal = 720; $(" ...

jqueryhtml