How to Vertically Center an Image in a Row using Bootstrap

Question

How to Vertically Center an Image in a Row using Bootstrap

I've been struggling for a while to properly center this image within the row that contains the div with the image. Here is the HTML code I am using:

            <div class="row">
            <div class="col-md-9">
                <div class="col-md-12">
                    <h3 style="text-transform: uppercase"><strong>Title</strong></h3>
                    <p>Text</p>
                    <br>
                    <h3 style="text-transform: uppercase"><strong>Title</strong></h3>
                    <p>Text</p>
                    <br>
                    <h3 style="text-transform: uppercase"><strong>Title</strong></h3>
                    <p>Text(2 male, 1 female, 3 mixed characters)</p>
                </div>
            </div>
            <div class="col-md-2">
                <img class="img-full center-block" src="img/img.jpg" alt="">
            </div>
        </div>

I have tried various suggestions but none of them seem to work. https://css-tricks.com/centering-css-complete-guide/

Since this is a responsive website, I do not know the height of the element. I attempted to use translate to move the image, which resulted in this:

https://i.sstatic.net/4rt0w.jpg

Using flexbox caused issues with my mobile design as the columns did not collapse correctly, resulting in this:

https://i.sstatic.net/12uGE.jpg

I also tried the following code:

.vcenter {
display: inline-block;
vertical-align: middle;
float: none;
}

However, it did not yield any results:

https://i.sstatic.net/apCCu.jpg

At this point, I feel like I have exhausted all known solutions. Does anyone have any ideas on how to resolve this issue? I suspect it may be related to the way I have structured my columns within columns, but changing that breaks my overall design...

Edit: This is the desired look:

https://i.sstatic.net/4qOYU.jpg

html css twitter-bootstrap

Answer 1

Answer №1

When dealing with vertically aligning an image within a col-md-2 container, it's important to note that the height of the container will adjust to the height of the image. To ensure proper alignment, you need to set a larger height value for the parent element of the image. This can be achieved by statically defining the height in your CSS or dynamically calculating it using JavaScript. Below is an example of how you can achieve this (the CSS provided is compatible with IE 9 and newer versions; I also swapped out the bootstrap class to xs for demonstration purposes):

.vcenter {
position: relative;
  top: 50%;
  transform: translateY(-50%);
}
.taller{ height:300px;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="container">
<div class="row">
            <div class="col-xs-9">
              <div class="row">
                <div class="col-md-12">
                    <h3 style="text-transform: uppercase"><strong>Title</strong></h3>
                    <p>Text</p>
                    <br>
                    <h3 style="text-transform: uppercase"><strong>Title</strong></h3>
                    <p>Text</p>
                    <br>
                    <h3 style="text-transform: uppercase"><strong>Title</strong></h3>
                    <p>Text(2 male, 1 female, 3 mixed characters)</p>
                </div>
              </div>
            </div>
            <div class="col-xs-2 taller">
                <img class="img-full center-block vcenter" src="img/img.jpg" alt="">
            </div>
        </div>
</div>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

For those looking for a JAVASCRIPT solution:

$(document).ready(function(){
   matchColHeight();
});

$(window).resize(function(){
    matchColHeight();
}); 

function matchColHeight() {
  var col1_height = $('.col1').height(); 
  $('.col2').css('height', col1_height);  
}

.vcenter {
    position: relative;
      top: 50%;
      transform: translateY(-50%);
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

    <div class="container">
    <div class="row">
                <div class="col-xs-9">
                  <div class="row">
                    <div class="col-md-12 col1">
                        <h3 style="text-transform: uppercase"><strong>Title</strong></h3>
                        <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
                        <br>
                        <h3 style="text-transform: uppercase"><strong>Title</strong></h3>
                        <p>Text</p>
                        <br>
                        <h3 style="text-transform: uppercase"><strong>Title</strong></h3>
                        <p>Text(2 male, 1 female, 3 mixed characters)</p>
                    </div>
                  </div>
                </div>
                <div class="col-xs-2 col2">
                    <img class="img-full center-block vcenter" src="img/img.jpg" alt="">
                </div>
            </div>
    </div>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

Answer 2

When dealing with vertically aligning an image within a col-md-2 container, it's important to note that the height of the container will adjust to the height of the image. To ensure proper alignment, you need to set a larger height value for the parent element of the image. This can be achieved by statically defining the height in your CSS or dynamically calculating it using JavaScript. Below is an example of how you can achieve this (the CSS provided is compatible with IE 9 and newer versions; I also swapped out the bootstrap class to xs for demonstration purposes):

.vcenter {
position: relative;
  top: 50%;
  transform: translateY(-50%);
}
.taller{ height:300px;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="container">
<div class="row">
            <div class="col-xs-9">
              <div class="row">
                <div class="col-md-12">
                    <h3 style="text-transform: uppercase"><strong>Title</strong></h3>
                    <p>Text</p>
                    <br>
                    <h3 style="text-transform: uppercase"><strong>Title</strong></h3>
                    <p>Text</p>
                    <br>
                    <h3 style="text-transform: uppercase"><strong>Title</strong></h3>
                    <p>Text(2 male, 1 female, 3 mixed characters)</p>
                </div>
              </div>
            </div>
            <div class="col-xs-2 taller">
                <img class="img-full center-block vcenter" src="img/img.jpg" alt="">
            </div>
        </div>
</div>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

For those looking for a JAVASCRIPT solution:

$(document).ready(function(){
   matchColHeight();
});

$(window).resize(function(){
    matchColHeight();
}); 

function matchColHeight() {
  var col1_height = $('.col1').height(); 
  $('.col2').css('height', col1_height);  
}

.vcenter {
    position: relative;
      top: 50%;
      transform: translateY(-50%);
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

    <div class="container">
    <div class="row">
                <div class="col-xs-9">
                  <div class="row">
                    <div class="col-md-12 col1">
                        <h3 style="text-transform: uppercase"><strong>Title</strong></h3>
                        <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
                        <br>
                        <h3 style="text-transform: uppercase"><strong>Title</strong></h3>
                        <p>Text</p>
                        <br>
                        <h3 style="text-transform: uppercase"><strong>Title</strong></h3>
                        <p>Text(2 male, 1 female, 3 mixed characters)</p>
                    </div>
                  </div>
                </div>
                <div class="col-xs-2 col2">
                    <img class="img-full center-block vcenter" src="img/img.jpg" alt="">
                </div>
            </div>
    </div>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

How to Vertically Center an Image in a Row using Bootstrap

Answer №1

Similar questions

Loading logos dynamically using Jquery upon selection of an option

Step-by-step guide on using nodemon on a web hosting server

Transferring selected text to a Cordova application from a different application

Here are the steps to effectively incorporate CSS classes in a form using Laravel Collective 5.2 framework

Steps to deactivate a ladda button

What could be causing my browser to display twice the height value?

Utilizing Javascript to Open a New Tab from Drupal

Submitting an AJAX form redirects to a different page instead of keeping the user on the current page

Is there a way to show an element on a website only when the height of the HTML content exceeds the height of the viewport?

Connect an EventListener in JavaScript to update the currentTime of an HTML5 media element

Challenge with Alignment of Fields in Bootstrap's Horizontal Form

Effortlessly showcase JSON data in an HTML owl carousel

menu with dropdown options within dropdown options

Does the CSS overflow property affect the borders of an element?

How can I align the CSS Horizontal Menu directly under the parent menu instead of its current incorrect x-position?

Activate the radio button upon page load in angularjs

Positioning a div to the right of another div within a container (box)

Is there a way to modify the styling for ListItemButton specifically when it is in a selected state?

What is the proper way to retrieve the JSON data?

Encountering a SyntaxError: Unexpected token < in the initial position of JSON during JSON parsing within Node.js