michaelmcgurk michaelmcgurk - 6 months ago 12
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 {
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

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;
}
Comments