html - 将图像旁边的文本居中对齐

Question

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

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

Answer 1

您需要定义自己的自定义列 css 类并将其显示设置为表格单元格。最后，使 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>