How do i center text on an image?

Question

I am trying to center text over an image of a banner.

Here is a jsfiddle of it.

https://jsfiddle.net/c6Lcr0ap/

HTML:

<div class="about-me">
  <div class="about-me__banner">

    <div class="about-me__banner-text">
      <h3>About Me</h3>
    </div>

    <div class="about-me__banner-image">
      <img src="https://i.imgur.com/qiUWxdd.png">
    </div>

  </div>
</div>

CSS:

h3 {
  color: orange;
}

Answer 1

 .about-me__banner{ position:relative; text-align:center; } .about-me__banner-text{ position:absolute; width:100%; color: orange; } 

 <div class="about-me"> <div class="about-me__banner"> <div class="about-me__banner-text"> <h3>About Me</h3> </div> <div class="about-me__banner-image"> <img src="https://i.imgur.com/qiUWxdd.png"> </div> </div> </div> 

Answer 2

It is actually simple to do this.

first your need to absolute position the text container .about-me__banner-text relative to it's parent .about-me__banner , so it can stay over your image.

Then you can center everything inside .about-me__banner vertically and horizontally with flexbox, resulting in these new rules:

.about-me__banner {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: center;
}

.about-me__banner-text {
  position: absolute;
}

That should do the trick. You can check your modified fiddle here.

Answer 3

 .about-me { text-align:center; } 

Answer 4

Here is https://jsfiddle.net/fkp9g1jr/

.about-me__banner-text     

class has width same as image

Answer 5

If a fixed height is ok for you, here you have another solution:

.about-me__banner-text {
    background-image: url("https://i.imgur.com/qiUWxdd.png");
    background-repeat: no-repeat;
    background-position: center;
    height: 57px;
    line-height: 57px;
    text-align: center;
}

Here is the jsfiddle: https://jsfiddle.net/01h8tqcc/

Update:

It is probably better to split the styles like this:

.about-me__banner {
  background-image: url("https://i.imgur.com/qiUWxdd.png");
  background-repeat: no-repeat;
  background-position: center;
}

.about-me__banner-text {
  height: 57px;
  line-height: 57px;
  text-align: center;
}

jsfiddle: https: https://jsfiddle.net/01h8tqcc/1/