javascript - 将文本与图像垂直对齐

Question

我正在使用 Bootstrap 显示随机推文和旁边的静态图像。

看起来不错，但文本始终垂直位于顶部，而不是图像的中心。

我该如何解决这个问题，无论推文的长度如何，它都会垂直显示在中间？

演示: 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

我会说最简单的方法是像这样设置一些 css:

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

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

或者你可以使用 display: flex; 如果浏览器支持足够的话:http://caniuse.com/#search=flex

演示:https://jsfiddle.net/9wwuznpL/4/