如何使相同的列高和垂直对齐文本：使用 Bootstrap 3（响应式）在 div 中居中？不需要显示表或 flex。如果可能的话

【问题标题】：How to make equal column height and vertical align text : middle in div using Bootstrap 3 (responsive)? Don't need display table or flex. If possible如何使相同的列高和垂直对齐文本：使用 Bootstrap 3（响应式）在 div 中居中？不需要显示表或 flex。如果可能的话
【发布时间】：2017-10-10 07:12:45
【问题描述】：

找不到解决办法。我有两列的行。一个带img，另一个带文本。我找到了两列高度相等的解决方案。另外我想垂直对齐div中的文本。我尝试了一些方法，但没有奏效。请帮忙..这是图像-- what I have

what I need

【问题讨论】：

你能分享你的代码吗？
你可以使用 jquery 等高列。
@SahilDhir jsfiddle.net/romansstudents/fLs47cdb/8
如果使用 css 则没有 flex 或 display-table 单元格是不可能的..
@SahilDhir 现在我明白了。 jquery解决方案呢？

标签： css twitter-bootstrap-3 responsive-design height vertical-alignment

【解决方案1】：

这个 css 类将使您的列高度相同。要使图像居中，您可以使用 flex，align-items: center，例如 .center-img

.row-eq-height{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    border:1px solid blue;
}

div.center-img {
  border:2px solid red;
  display:flex;
  align-items:center;
  }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row row-eq-height">
    <div class="col-md-6">
        <p>text</p>
        <p>text</p>
        <p>text</p>
        <p>text</p>
    </div>
    <div class="col-md-6 center-img">
        <img src="https://i.stack.imgur.com/vo8VJ.jpg?s=64&g=1" />
    </div>
</div>

【讨论】：

谢谢。有用。为了响应，我还添加了 flex-wrap: wrap.