Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Posted by dlpuxdzztg
dlpuxdzztg
8,243 Points

Centering Text Over an Image

Hello.

I wanted to know if there was a way to center text over an image using CSS, I currently only have my HTML code so far. I want to center the h1 text over my cloud image

HTML-

<a href="index.html" id="logo">
        <img src="img/cloud.png" alt=""/>
        <h1>Portfolio</h1>
      </a>

EDIT

So creating a div class and making h1 absolute has helped quite a bit, but I'm unsure where to go from here.

.logo_class h1 {
  position: absolute;
}

Thank you.

Doegena Fennich
Doegena Fennich
8,974 Points

Do you mean something like this http://jsbin.com/fuvikigoko/edit?html,css,output ?

side note: still trying to see myself how positions exactly work, this code can probably work much better with percentages.

dlpuxdzztg
dlpuxdzztg
8,243 Points

Yeah, something like that.

1 Answer

Nicholas Vogel
Nicholas Vogel
12,318 Points
Nicholas Vogel
Nicholas Vogel
12,318 Points

You should be able to use the text-align: center CSS command on your a element. Something like this

a {
  text-align: center;
}
dlpuxdzztg
dlpuxdzztg
8,243 Points

I mean, can I center my h1 element text over my image, the code only puts the text at the center of the page. It's underneath the image by default.

Nicholas Vogel
Nicholas Vogel
12,318 Points

In that case, you should just need to put <h1> above the <img> tag. The browser reads HTML from the top down, so it will render the img before the h1 tag unless the h1 tag comes first.

dlpuxdzztg
dlpuxdzztg
8,243 Points

The code only puts the text at the center of the page, I tried align-items, self, and content and they did nothing. From what I've heard, the best approach is using a div class.

dlpuxdzztg
dlpuxdzztg
8,243 Points

Updated my post with new info.