CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Kathryn Crawford
Kathryn Crawford

Reputation: 611

Bootstrap - Center img in row vertically

I've been trying forever to center this image properly in the row containing the div the img is in. Here's my html

            <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've tried all the suggestions on this page and none of them seem to work. https://css-tricks.com/centering-css-complete-guide/

I do not know the height of the element since this is a responsive website, so I tried using translate to move the image, and this happened.

enter image description here

If I use flexbox, then my mobile design breaks because the columns don't collapse right, like this.

enter image description here

If I use this code 

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

Nothing happens

enter image description here

So I feel like I've exhausted any well known solutions. Anyone have any idea how to fix this? I have a feeling my issue is linked to my stacking columns within columns, but if I don't do that it breaks my design too...

Edit: This is how I want it to look

enter image description here

Upvotes: 1

Views: 74

Answers (1)

tnschmidt
tnschmidt

Reputation: 1196

At this point you won't be able to vertically align the image because the containing col-md-2 will shrink down to the height of the image. You'll need to ensure that the parent element of the image has larger height value. You can set it to the height of the col-md-9 statically in your css (like I have done in the snippet) or have it check dynamically by javascript. Then you can run the code I have below (the css will work IE 9 and up, I also changed bootstrap class to xs to illustrate in the snippet):

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

This should do it for the JAVASCRIPT version

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

Upvotes: 1

Related Questions