Bootstrap Vertical align in Column

Question

So I have a jumbotron with one row and two columns for Desktop view. The row height depends on the text. I want to center an image vertically to the text beside.

I'm using a grid layout with two columns for this and following code to vertically center the image:

#jumbotron-introduction {
    
    background-color: white;
}

#p-introduction {
    
    font-size: 16px;
}

#image-introduction {
    
    width: 100%;
}

.vcenter {
    
    display: flex;
    align-items: center;
    justify-content: center;
}

<div class="container">
        <div class="jumbotron" id="jumbotron-introduction">
            <div class="row">
                <div class="col-xs-12 col-md-6 col-sm-6">
                    <h3>...</h3>
                    
                    <p id="p-introduction">...</p>
                </div>
                <div class="col-xs-12 col-md-6 col-sm-6 vcenter">
                    <img src="Images/..." id="image-introduction">
                </div>
            </div>
        </div>
    </div>

But nothing changes, the image is still centered on the top of the column. I also tried the following code:

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

But it's the same result, nothing happens.

Thats how it looks like at the moment

But I want it to look like this:

Answer 1

When ever I need to center something in HTML - the css-tricks guide is always help me to do so. I suggest you read and save it for next time you need to center something!

For your question, you can achieve the desired result using flexbox - Set the .vcenter display to flex, so you can use the align-items property.

.jumbotron__container {
  display: flex;
  background: #fff;
}

.jumbotron__text {
  flex: 1 0 50%;
  padding: 10px;
  border-right: 1px solid black;
}

.jumbotron__image {
  display: flex;
  flex: 1 0 50%;
  align-items: center;
  justify-content: center;
}

<div class="container">
        <div class="jumbotron" id="jumbotron-introduction">
        <div class="jumbotron__container">
          <div class="jumbotron__text">
            <h3>Loren And Ipsum</h3>
            <p id="p-introduction">Dolum And Smith<p>
          </div>
          <div class="jumbotron__image">
            <img src="Images/..." id="image-introduction">
          </div>
        </div>
        </div>
    </div>

Answer 2

I think it was still in beta when the question was asked, but Bootstrap 4 has new flexbox-based utility classes that make this easy. In particular, align-self-center would have done what you were looking for:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div class="jumbotron bg-light">
        <div class="row">
            <div class="col-xs-12 col-md-6">
                <h3>Text</h3>
                <p class="h4">Text</p>
                <p>Text</p>
                <p>More text</p>
                <p>Even more text</p>
                <p>Just a little more text</p>
            </div>

            <div class="col-xs-12 col-md-6 align-self-center">
                <img src="https://www.gstatic.com/images/branding/product/2x/avatar_square_grey_48dp.png">
            </div>
        </div>
    </div>
</div>

(Snippet doesn't seem to work unless it's full screen BTW.)

Answer 3

#image-introduction{
    vertical-align: middle;
    position: absolute;
    top: 45%;
    left: 45%;
}
.col-md-6.col-sm-6.col-xs-6 {
    display: table-cell;
    height: auto;
    border: 1px solid black;
    float: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div class="row">
       <div class="parent">
        <div class="col-md-6 col-sm-6 col-xs-6">
             <img src="..." id="image-introduction">            
        </div>
        <div class="col-md-6 col-sm-6 col-xs-6">
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
        </div>
    </div>
</div></div>

Answer 4

Use an inline-block helper.

.vcenter {
  display: inline-block;
  vertical-align: middle;
  float: none;
  height: 200px;
  white-space: nowrap;
}

#image-introduction {
  display: inline-block;
  vertical-align: middle;
}

.inline-block-helper {
  height: 100%;
  vertical-align: middle;
  display: inline-block;
}

<div class="col-xs-12 col-md-6 col-sm-6 vcenter">
  <span class="inline-block-helper"></span>
  <img src="https://placehold.it/100x100" id="image-introduction">
</div>