在图像旁边的中间对齐文本

Question

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

https://jsfiddle.net/u5qngm5q/

Answer 1

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

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

Answer 2

将users和display: flex;添加到align-items: center;类会产生此效果。同时添加.row将使代码响应。然后将flex-wrap: wrap;添加到您的文本容器中，以便在移动视图Fiddle

中居中文本

HTML

flex-grow:1;

CSS

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