How do i center text on an image? - html

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/