Align text vertically alongside image

Question

I am using Bootstrap to display a random tweet and a static image alongside it.

It looks great, but the text is always vertically at the top, instead of center of the image.

How do I resolve this so no matter the length of the tweet, it'll display in the middle vertically?

Demo: https://jsfiddle.net/9wwuznpL/

 /* Latest compiled and minified CSS included as External Resource*/ /* Optional theme */ @import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css'); body { background:black; margin: 10px; color:white } img { float:left } /*========== Non-Mobile First Method ==========*/ /* Large Devices, Wide Screens */ @media only screen and (max-width : 1200px) { } /* Medium Devices, Desktops */ @media only screen and (max-width : 992px) { } /* Small Devices, Tablets */ @media only screen and (max-width : 768px) { img { float:none } } /* Extra Small Devices, Phones */ @media only screen and (max-width : 480px) { } /* Custom, iPhone Retina */ @media only screen and (max-width : 320px) { } 

 <link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <div class="container"> <div class="row"> <div class="col-md-6 text-center col-md-push-3"> <div class="tweet"> <!--<i class="fa fa-twitter fa-5" aria-hidden="true" style="font-size: 4em;color:white"></i>--> <img src="http://placehold.it/100x100"> <blockquote> <p> RT <a href="http://twitter.com/thetomzone">@thetomzone</a> : Seriously, drop everything you're... </p> </blockquote> </div> </div> </div> 

Answer 1

Give

img, blockquote {
  float: none;
  display: inline-block;
}

JSFIDDLE

 /* Latest compiled and minified CSS included as External Resource*/ /* Optional theme */ @import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css'); body { background: black; margin: 10px; color: white } img, blockquote { float: none; display: inline-block; } /*========== Non-Mobile First Method ==========*/ /* Large Devices, Wide Screens */ @media only screen and (max-width: 1200px) {} /* Medium Devices, Desktops */ @media only screen and (max-width: 992px) {} /* Small Devices, Tablets */ @media only screen and (max-width: 768px) { img { float: none } } /* Extra Small Devices, Phones */ @media only screen and (max-width: 480px) {} /* Custom, iPhone Retina */ @media only screen and (max-width: 320px) {} .tweet:after { clear: both; display: table; content: ''; } 

 <link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> <div class="container"> <div class="row"> <div class="col-md-6 text-center col-md-push-3"> <div class="tweet"> <!--<i class="fa fa-twitter fa-5" aria-hidden="true" style="font-size: 4em;color:white"></i>--> <img src="http://placehold.it/100x100"> <blockquote> <p> RT <a href="http://twitter.com/thetomzone">@thetomzone</a> : Seriously, drop everything you're... </p> </blockquote> </div> </div> </div> 

Answer 2

I would say the easiest way is to set some css like this:

.tweet {
  display: table;
  width: 100%;
}

.tweet blockquote {
  display: table-cell;
  vertical-align: middle;
}

Or you could use display: flex; if the browser support is enough: http://caniuse.com/#search=flex

Demo: https://jsfiddle.net/9wwuznpL/4/

Answer 3

You need to change the default display of both elements, image and blockquote, to inline-block . Then you can use vertical-align css property and set its value to middle . You should set a width or max-width to the blockquote element, because if you don't do this the blockquote could place itself below the image.

I modified your fiddle: https://jsfiddle.net/9wwuznpL/1/

  img {
    display: inline-block;
    vertical-align: middle;
    width: 100px;
  }

  blockquote {
    display: inline-block;
    vertical-align: middle;
    width: calc(100% - 110px);
    margin-bottom: 0;
    text-align: left;
  }

As you could see you can use calc for the quote width value, eg if the image is 100px wide the quote must be calc(100% - 110px). You must know that inline-block elements work as typography, so an empty space will work as a nbsp; so you should add around 4 extra pixels. In my example I added 10 more pixels, but with only 4 this should work properly.

Answer 4

You can achieve your effect in a few different ways: Flexbox, absolute positioning with transformations, and display: table / table-cell with vertical-align . Since the other answers have already covered the other types, here's the Flexbox version:

 .tweet { border: 1px solid black; /* Use .tweet as flexbox container */ display: flex; /* Align all items in the middle of said container */ align-items: center; } .tweet__avatar, .tweet__body { border: 1px dotted red; } .tweet__body { margin: 0; /* This instructs the browser to stretch .tweet__body all the way to the end. Otherwise it would stop at the end of the content. */ flex-grow: 1; } 

 <div class="tweet"> <div class="tweet__avatar"> <img src="http://placehold.it/100x100" alt=""> </div> <blockquote class="tweet__body"> <p><cite>RT <a href="http://twitter.com/thetomzone">@thetomzone</a></cite> Seriously, drop everything you're...</p> </blockquote> </div>