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

Aakash Srivastav
seal-mask
.a{fill-rule:evenodd;}techdegree
Aakash Srivastav
Full Stack JavaScript Techdegree Student 11,617 Points

position offsets

figure { margin: 0; line-height: 0; position: relative; }

figcaption { font-size: .9em; line-height: 1.5; color: #fff; padding: 1em;
background: rgba(19,43,102, .85); position: absolute; top: 50%; }

I have given "figcaption" , a top offset of 50% but is seems like it is moving more than 50% , (around 75%). Why this is happening?

1 Answer

Steven Parker
Steven Parker
203,728 Points

It will start at 50% and it's height will extend below that. So be sure you're looking at the top of the element. With this setting it will not be vertically centered.