垂直居中引导 col 的内容（文本）答案

【问题标题】：Center content (text) of a bootstrap col vertically垂直居中引导 col 的内容（文本）
【发布时间】：2015-05-13 18:46:49
【问题描述】：

我已经看到了 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-resposiive，但它没有针对较小的屏幕调整大小，我可以解决这个问题吗？

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

【问题讨论】：

您希望图像以内容或其他方式垂直居中？？
我澄清了。我需要将 div 内的文本相对于它插入的 col 垂直居中。目前它位于 col 的顶部。
你能提供一个jsfiddle吗
jsfiddle 在这里：jsfiddle.net/9btr6zon 我删除了部分文本以重现我得到的内容，大图，短文本。

标签： html css twitter-bootstrap

【解决方案1】：

我不了解引导程序，但您可以内联它，并使用垂直对齐来获得所需的效果。

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

【讨论】：

对我不起作用，图像在文本之上。
哈哈，我自己从不使用引导程序，但我使用过类似的框架。转到引导程序的文档，您需要 .col-xs-12 或 .col-sm-12 之类的东西。
/* Medium devices (desktops, 992px and up) */ @media (min-width: @screen-md-min) { ... } 您正在使用 md，它将适用于任何屏幕尺寸 992 及以上的屏幕，也就是非移动设备...所以请注意这一点，祝您好运。
jsfiddle.net/vqc4ob4s/1 ... 我覆盖了流程，但我不知道这将如何影响其余的布局。
我编辑了我的问题，如果文本更短，它不会垂直居中。

【解决方案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;
  }
}

【讨论】：

【解决方案3】：

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

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

附：我在这个 jsfiddle 中使用了特定的高度，但您可以稍后根据需要更改和指定百分比高度或其他内容。

【讨论】：