CSS CSS Layout Basics Positioning Page Content Create an Image Caption with Absolute Positioning

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%;"'?

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

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

Yes it's possible:

img { position: relative; }

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