How to center a text box over a header image with CSS

I’m moving along in my coding course and have stumbled upon an old nemesis: centering text boxes over header image”.

While this will probably be a piece of cake to any experienced developer, I was having a really hard time with it. I could center text just fine, but when I wanted to add a coloured box behind the text that didn’t cover the full width… well it was a mess.

Thanks to excessive googling and playing around I’ve finally found the solution that I’m going to share with you here in case you are struggling with the same issue.

What I started with (based on a Codecademy exercise), was a header like this:

What I wanted to have was something more like this:

Firstly, here is my final code that got me the result above:

What follows is a step by step journey of my trials and errors, so that you can see what works, and what doesn’t, and why.

Position: relative and position: absolute

I realised very quickly that I couldn’t just take the H1, give it a background colour and a width and somehow just center it vertically and horizontally. (Please tell me if you do know how this can be done).

I had to catch up on the CSS position property first, as I wasn’t very solid on it. In case you do too, I can recommend this video:

The first step was to create a separate <div class=”header-text”> for the H1 within the <div class=”header”>, so that the image and the text could live in separate boxes.

I then assigned position: relative to the header and position: absolute to the header-text. This way I could position the text within the box for the image (and not outside of it).

So far so good, but somehow I still couldn’t get the text box to center. I tried to size it at 60% of the total width, moving it down with a top margin and centering horizontally it with a margin auto, like so:

.header-text{
position: absolute;
width:60%;
background-color: #7FDA44;
margin: 80px auto;
}

THIS IS NOT THE CODE YOU’RE LOOKING FOR

What I got as a result was this:

Not horrible, but not what I wanted.

Left, up, down and negative margins

I then tried moving my text box with the left property. With left / right / top / bottom you can move your position: absolute element around, always in relation to its position: relative parent.

.header-text{
position: absolute;
left: 100px;
width:60%;
background-color: #7FDA44;
margin: 80px auto;
}

THIS IS ALSO NOT THE CODE YOU’RE LOOKING FOR

The result:

I was already thrilled because I had finally managed to move that stupid box away from the left edge. Great sucsess, but still not good enough. Obviously, by defining a “position away from the left” in pixels is going to cause problems as soon as the screen is not the exact same size as the one I’m looking at.

I therefore switched to using left: 50%, which literally says put the element at half of the width of the parent element. Sounds like centering, but isn’t!

Here the code:

.header-text{
position: absolute;
left: 50%;
width:60%;
background-color: #7FDA44;
margin: 80px auto;
}

THIS IS ALSO NOT THE CODE YOU’RE LOOKING FOR

And the result:

Sweet Jesus, now all of a sudden I had a horizontal scroll and the box was going over the right edge of the header image.

WTF happened?

I know now that this is obviously because I told it to do so with my code, duh. First I told it to make the box 60% of the width of the header. And then I told it to please the box in the middle, but that means the box’s left hand side will be aligned with the middle line of the header. Not that the box itself will be centered.

Crap, but I was still getting closer. I googled a bit more and found that the secret lies in setting a fixed width for the text box and then giving it a negative left margin, that is half its width, so that it moves back to the left and is now centered.

.header-text{
position: absolute;
left: 50%;
width:400px;
background-color: #7FDA44;
margin: 75px 0px 75px -200px;
}

THIS IS IT

Step by step this means: I want my box to be 400px wide, and I want it to be aligned with the middle line of the header. But I also want it to the -200px margin on the left which moves it back from the middle line 200px to the left edge, thereby aligning its center with the middle line of the header.

But please, if you do know of an easier way to do this, please tell me!!!!