Vertical align text middle to image when text is less

Question

I have a text-image component, and i need to vertical-align text middle to the floated image , if the text is less (condition one) (for larger screens). if the text is more then let it wrap around the floated image (condition two) (again for larger screens). How can i do this in CSS or do we need Javascript for this? Here is fiddle. Both my conditions one and two should work.

 .clearfix { clear: both; }
.text-img { padding-left: 15px; padding-right: 15px; }
.text-img .info-box .info--body p { max-width: none; }
.text-img .info-box { text-align: justify; }
.text-img .stock-img { width: 100%; }

@media (min-width: 992px) {
  .text-img.text-right .stock-img { width: 50%; float: left; }
  .text-img.text-right  .stock-img { padding-right: 15px; padding-bottom: 15px; }

  .text-img.text-left .stock-img { width: 50%; float: right; }
  .text-img.text-left  .stock-img { padding-left: 15px; padding-bottom: 15px; }
}

<div class="clearfix text-img text-left">
 <img src="https://cdn0.vox-cdn.com/thumbor/gvDQZLtlEM7U99rmTEdMoUtLRJU=/0x96:2039x1243/1600x900/cdn0.vox-cdn.com/uploads/chorus_image/image/50319283/ipad1_2040.0.0.jpg" alt="iPad" class="img-responsive stock-img" />
 <div class="info-box">
  <header class="info--header">
   <h3 class="h3">The science of today is the technology of tomorrow.</h3>
  </header>
  <div class="info--body">
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc semper urna nec lectus malesuada tincidunt. Aenean faucibus, nulla sed luctus tempus, purus libero vestibulum velit, et blandit odio nunc ac quam. Donec tellus tellus, venenatis ac diam nec, sodales viverra orci.</p>
  </div>
 </div>
</div>

I want the final output to be like this, which satisfys both my condition:

Well the answers given are right, this cannot be solved just by CSS alone, so i had to come up with jQuery solution. For those looking for solution for such scenarios, here is jQuery code that solved my problem:

$(document).ready(function() {

    $(".text-img").each( function() {
        var cH = parseInt( $( this ).height() );
        var tH = parseInt( $( this ).find('.info-box').height() );

        if( tH < cH ) {
            var pt = ( cH - tH ) / 2;

            $( this ).find('.info-box').css({
                "padding-top" : pt + "px"
            });
        }
    });

});

Answer 1

Use a flex box layout when you are in the smaller screens.

@media (min-width: 992px) {

  .text-left {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .text-left img {
    max-width: 50%;
    height: auto;
    margin-right: 10px;
  }

}

Preview

Output: http://jsbin.com/lulecudaji/edit?html,css,output

Answer 2

I would recommend you better/older than flex-box tick for centring elements.

For horizontal centring use simply text-align: center; on container div

For vertical centring uses propoerty of display inline-block elements which aligned in to the middle to center all display inline-block in the line.

Making it bigger i'll move other elements to the center

Making it 100% height causes the othere elements centers to the middle.

You simply need to create ghost (not visible) - red element to center content - blue and green elements.

For ghost element use for it before or after of conteiner div:

.continer:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

And display inline-block your content:

.content{
  display: inline-block;
}

Of course delete position:absolute etc.

Last tweak will be to get rid of that small spaces between elements (especially between red and others) use one of the tricks from here: https://css-tricks.com/fighting-the-space-between-inline-block-elements/ Probably you will need to set font size to zero.

More about ghost elements: https://css-tricks.com/centering-in-the-unknown/