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 CSS Layout Basics Positioning Page Content Create an Image Caption with Absolute Positioning

Posted by Dylan Clelland
Dylan Clelland
9,606 Points

Position caption in the center

How would I position a Caption or text in the center of an image perfectly? Would it just be like "Top: 50%;" and "Bottom: 50%;"'?

ibrahim Warsame
ibrahim Warsame
7,803 Points

I think that you need to do it in pixels so that you have more control, but yeah you can do it in percentages too.

2 Answers

Michael Lambert
Michael Lambert
6,286 Points
Michael Lambert
Michael Lambert
6,286 Points

Hia,

You would need to give the caption a fixed width and height then use the calc function for the TOP and LEFT offsets. If you want it centered based on center point of the caption then minus it by half the width and height.

eg,

width: 150px;
height: 150px;
left: calc(50% - 75px);
top: calc(50% - 75px);
Sana Hatoum
Sana Hatoum
306 Points
Sana Hatoum
Sana Hatoum
306 Points

Yes it's possible:

img { position: relative; }

h5 { position: absolute; left: 50%;top:50%; }