Text overlaying image with center center

Question

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:

when i want to achieve this

Is there a better way to achieve this? Flexbox?

You can use the image as background and that way you don't need an absolute position for the text. — Madalina Taina, Jul 28 '16 at 13:45

score 1 · Accepted Answer · answered Jul 28 '16 at 13:34

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>

Just added this, works perfect. Thank you. – Paolo Resteghini Jul 28 '16 at 13:36 — Paolo Resteghini, Jul 28 '16 at 13:36

score 0 · Answer 2 · answered Jul 28 '16 at 13:33

0

position: absolute;
top: 50%;
right: 30px;
left: 30px;

transform: translateY(-50%);

Will achieve this for you.

You could also do:

position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;

align-items: center;
justify-content: center;

display: flex;

But this has less support and obviously more lines :)

answered Jul 28 '16 at 13:33

Dan Gamble

3,965
1
24
44

I added that and it got this: http://s32.postimg.org/5cxak69v9/screenshot_212.png Appears to be off center on both axis – Paolo Resteghini Jul 28 '16 at 13:35
Second one worked perfect! – Paolo Resteghini Jul 28 '16 at 13:35

score 0 · Answer 3 · answered Jul 28 '16 at 13:33

0

change css this way

.safaripreview h3
{
  position: absolute; 
  top: 50%;
  left:50%;
  transform: translate(-50%, -50%);
  width: 100%;
  color: white; 
  padding: 10px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
}

answered Jul 28 '16 at 13:33

Lalji Tadhani

14,041
3
23
40

Text overlaying image with center center

3 Answers3