michaelmcgurk michaelmcgurk - 2 years ago 87
HTML Question

Align text vertically alongside image

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 {
margin: 10px;

img {

/*========== 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 {


/* 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">

RT <a href="http://twitter.com/thetomzone">@thetomzone</a> : Seriously, drop everything you're...



Answer Source

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;
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download