垂直中心bootstrap col的中心内容（文本）

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/

我手动将高度设置为500px以尝试对齐内容。有没有什么方法可以删除它，同时仍然将内容集中在更大的屏幕上？

额外的问题，图片使用的是img-circle和img-resposive，但是对于较小的屏幕，它没有调整大小，我能解决这个问题吗？

编辑：  作为“占位符”解决方案，我将col的填充顶部设置为大约150px。

Answer 1

我不了解bootstrap但你可以内联它，并使用vertical align来获得所需的效果。

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

好吧，我失去了耐心，最后通过填充使其居中。但由于它在较小的设备上看起来非常难看，我最终使用了可变填充：

@media (max-width:768px) {
  .var-padding {
    padding-top: 0px;
  }
}

@media (max-width:992px) {
 .var-padding {
    padding-top: 10px;
  }
}

@media (min-width:993px) {
  .var-padding {
    padding-top: 100px;
  }
}

Answer 3

稍微使用display: flex;，您可以垂直对齐文本与div的对比:)这是一个jsfiddle：http://jsfiddle.net/AndrewL32/9btr6zon/2/

.vert-align {
    display: flex;
    align-items: center;
    vertical-align: middle;
}

P.S。我在这个jsfiddle中使用了一个特定的高度，但你可以根据你的需要更改并指定一个百分比高度。