在图像旁边居中对齐文本答案

【问题标题】：Align Text In Middle next to an Image在图像旁边居中对齐文本
【发布时间】：2017-04-17 20:54:36
【问题描述】：

我在 div 中有一个带有 col-md-6 类的图像，我试图将文本放置在图像中间的旁边。什么代码适用于此？我发现可能但不准确的唯一方法是弄乱填充。

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');

#wrapper2 h1 {
  text-align: center
}

#wrapper2 p {
  text-align: center;
}

.col-md-6 {
  padding: 0;
}

<div class="container-fluid">
  <div id="wrapper2">
    <div class="row">
      <div class="col-md-6">
        <img class="img-responsive" src=https://s-media-cache-ak0.pinimg.com/736x/47/3d/e8/473de83da9ad0e72e340022bb68e9429.jpg>
      </div>

      <div class="col-md-6">
        <h1>Men's Line</h1>
        <p>Shop our newest 2017 arrivals</p>
      </div>
    </div>
  </div>
</div>

https://jsfiddle.net/u5qngm5q/

【问题讨论】：

您是否真的希望图像占据行的 50% 而文本/描述占据另一半？或者这只是您用来调整两者的一种机制？

标签： html css

【解决方案1】：

您需要定义自己的自定义列 css 类并将其显示设置为 table-cell。最后，将vertical-align和text-align属性设置为中间。

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');

#wrapper2 h1 {
  text-align: center
}

#wrapper2 p {
  text-align: center;
}

.col-md-6 {
  padding: 0;
}
.custom-column{
  display:table-cell;
  height:100%;
  width:50%;
  vertical-align:middle;
  text-align:center
}

<div class="container-fluid">
  <div id="wrapper2">
    <div class="row">
      <div class="custom-column">
        <img class="img-responsive" src=https://s-media-cache-ak0.pinimg.com/736x/47/3d/e8/473de83da9ad0e72e340022bb68e9429.jpg>
      </div>
      <div class="custom-column">
          <h1>Men's Line</h1>
          <p>Shop our newest 2017 arrivals</p>
      </div>
    </div>
  </div>
</div>

【讨论】：

不确定我是否喜欢 Bootstrap 柱的踢脚线来完成这项工作。
你没有干预任何事情。您只需添加另一个类。
你不确定。如果 OP 想要使用 Bootstrap 列提供的断点怎么办？您的答案不包括 Bootstrap 列类，即使您的解决方案会覆盖它们以表现不同。
OP 代表什么？
OP = O原始 Poster = 发布问题的人。

【解决方案2】：

将display: flex; 和align-items: center; 添加到.row 类将具有此效果。还添加flex-wrap: wrap; 将使代码响应。然后将flex-grow:1; 添加到您的文本容器中，以使移动视图中的文本居中Fiddle

HTML

<div class="row flex-center">
  <div class="col-md-6 text-container">
   <h1>Men's Line</h1>
   <p>Shop our newest 2017 arrivals</p>
  </div>
</div>

CSS

.flex-center {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
} 

.text-container {
  flex-grow : 1;
}

【讨论】：