Paolo Resteghini Paolo Resteghini - 4 months ago 13
HTML Question

Text overlaying image with center center

I am trying to center center text overlaying an image. Here's what my code is:

<div class="col-md-6">
<div class="safaripreview">
<img src="img/safari1.png" class="img-responsive" alt="">
<h3>Our String Of Pearls</h3>
</div>
</div>


and my CSS is currently

.safaripreview
{
position: relative;
}

.safaripreview h3
{
position: absolute;
bottom: 0;
width: 100%;
color: white;
padding: 10px;
font-family: 'Montserrat', sans-serif;
font-weight: 700;
}


This is producing http://s32.postimg.org/9bg9eedf9/screenshot_210.png

when i want to achieve this

http://s32.postimg.org/u9mfchd9x/screenshot_211.png

Is there a better way to achieve this? Flexbox?

Answer

Yes. flexbox

.safaripreview {
  display: inline-block;
  position: relative;
}
.safaripreview {
  display: inline-block;
}
.safaripreview h3 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
}
<div class="safaripreview">
  <img src="http://www.fillmurray.com/460/300" class="img-responsive" alt="">
  <h3>Our String Of Pearls</h3>
</div>