在圖像旁邊的中間對齊文本

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