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 trialAlexey Tseitlin
5,866 PointsText 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
6,093 PointsIf 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
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