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

Question

我在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/

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

Answer 2

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

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