html - 垂直居中 Bootstrap 列的内容(文本)

Question

我已经看过 10 多个 stackoverflow 问题及其答案，到目前为止没有一个有效。

我在 bootstrap col 中有文本，但它只是位于 col 的顶部。我需要它居中，最好是相对于图像居中。

我正在使用媒体对象，但它对于较小的设备看起来不太好。

这是我的:

<div class="container">
  <div class="row">
     <div class="col-md-5">
        ...img stuff..
     </div>

     <div class="col-md-7 left-padding-30" style="height: 500px; border : 1px solid red;">
        <h2 class="featurette-heading">
           This First Heading
           <span class="text-muted">Will Catch Your Eye</span>
        </h2>
        <p class="lead">Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. </p>
     </div>
  </div>

输出:

jsfiddle:http://jsfiddle.net/9btr6zon/

我已将高度手动设置为 500 像素以尝试对齐内容。有什么方法可以删除它，同时仍然将内容居中以适应更大的屏幕？

额外的问题，图像使用了 img-circle 和 img-resposive，但它没有为较小的屏幕调整大小，我可以解决这个问题吗？

编辑: 作为“占位符”解决方案，我将 col 的 padding-top 设置为 150px 左右。

Answer 1

我不知道 bootstrap，但你可以将它内联，并使用垂直对齐来获得所需的效果。

.circle {
    border-radius: 50%;
	width: 100px;
	height: 100px;
    overflow:hidden;
    display:inline-block;
    vertical-align:middle;
}
.para {
    display:inline-block;
    vertical-align:middle;
}
h1,p {padding:0; margin:0;}

<div class="circle">
  <img src="http://placekitten.com/g/200/300">
</div>
<div class="para">
  <h1>HELP ME MAMA</h1>
  <p>The british are coming</p>
</div>