0

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;
}
  • Possible duplicate of [Unable to center text on image](https://stackoverflow.com/questions/40834500/unable-to-center-text-on-image) – Rob Oct 09 '17 at 23:38
  • https://jsfiddle.net/c6Lcr0ap/1/ –  Oct 09 '17 at 23:40
  • You need to clarify what you want. "On" the image or "over" an image and be specific in your meaning! – Rob Oct 09 '17 at 23:45

5 Answers5

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>
Vixed
  • 3,429
  • 5
  • 37
  • 68
1

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.

Pedro Britto
  • 33
  • 2
  • 5
0

.about-me {
  text-align:center;
}
mlegg
  • 784
  • 6
  • 19
  • 35
0

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

.about-me__banner-text

class has width same as image

LuRy
  • 74
  • 5
0

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/

DiegoTArg
  • 452
  • 1
  • 4
  • 14