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

CSS

Posted by Alexey Tseitlin
Alexey Tseitlin
5,866 Points

Text on image

What is the correct way to center text on images? I tried a lot of things and can't get it. I created the text with the border, but now how to get it on the image?

What I want: http://cs624428.vk.me/v624428997/175c0/J0HAtYoZRw4.jpg

My code:

<div class="cont">
            <div class="cata">
                <h1>
                    Latest Articles
                </h1>
            </div>
            <img src="/img/featured.jpg" alt="">
        </div>

.cata {
    font-family: 'Open Sans', sans-serif;
    text-transform: uppercase;
    font-size: 30px;
    color: #fff;
    display: inline-block;
    border: 1px solid black;
}

.cont img{
    width: 100%;
}

Thanx a lot for any help)

2 Answers

Michael Geatz
Michael Geatz
6,093 Points
Michael Geatz
Michael Geatz
6,093 Points

If you are looking for a quick fix you could add some margin, position, and z-index to your existing CSS.

.cata {
   margin-top: 5%;
   position: absolute;
   z-index: 1;
}

To center use { text-align: center }

You can read more the text-align property here: http://www.w3schools.com/cssref/pr_text_text-align.asp

Aglaya Orinko
Aglaya Orinko
5,839 Points
Aglaya Orinko
Aglaya Orinko
5,839 Points 
            <div class="cata">
                <h1>
                    Latest Articles
                </h1>
                <p>Lorem ipsum dolor sit amet</p>
            </div>

.cata {
    /* bluh */
    font-family: 'Open Sans', sans-serif;
    text-transform: uppercase;
    font-size: 30px;
    color: #fff;
    border: 1px solid black;
    /* Centering and background */
    padding: 18% 24%;
    text-align: center;
    background-image: url('../img/featured.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

As done here