Align Text In Middle next to an Image

Question

I have an image inside a div with a class of col-md-6 and I'm trying to position text next to the image right in the middle. What code works for that? The only way I've found possible, but not accurate is by messing with the padding.

 @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

You need to define your own custom column css class and set its display to table-cell. Finally, make vertical-align and text-align properties to 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

Adding display: flex; and align-items: center; to the .row class will have this effect. Also adding flex-wrap: wrap; will make the code responsive. Then add flex-grow:1; to your text container for centering the text in mobile view 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;
}