为什么我的字幕没有显示在滑块图像的中心

Question

i am trying to create my slider by using css animation properties. for this i have created slider which is working but when i tried to add captions its working too but caption are showing below the slider images not at center of the images even i added absolute position. here is my code. i also gave relative position to its parent div but still not working

 *{ margin: 0; padding: 0; } #fullwrapper{ width: 100%; height: auto; } /*=========================Slider Style======================*/ @keyframes slidy { 0% { left: 0%; } 20% { left: 0%; } 25% { left: -100%; } 45% { left: -100%; } 50% { left: -200%; } 70% { left: -200%; } 75% { left: -300%; } 95% { left: -300%; } 100% { left: -400%; } } @keyframes caps { 0% { left: 0%; float: none; } 20% { left: 0%; float: none;} 25% { left: -100%; float: none;} 45% { left: -100%; float: none;} 50% { left: -200%; } 70% { left: -200%; } 75% { left: -300%; } 95% { left: -300%; } 100% { left: -400%; } } #slider { overflow: hidden; } #slider figure img { width: 20%; float: left; } #slider figure { position: relative; width: 500%; margin: 0; left: 0; text-align: left; font-size: 0; animation: 30s slidy infinite; } #captions{ position: absolute; top: 50%; left: 50%; width: 500%; animation: 30s caps infinite; } .caption{ width: 20%; float: left; font-size: xx-large; font-weight: bold; color: red; font-variant: small-caps; } /*=========================Slider Style======================*/ #navbar{ width: 100%; height: 40px; background-color: transparent; position: absolute; top: 0; }

 <base href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/"> <div id="fullwrapper"> <!-- Start of Full Body Wrapper--> <div id="header"> <!-- Start of of Header--> <div id="slider"> <figure> <img src="austin-fireworks.jpg" alt> <img src="taj-mahal_copy.jpg" alt> <img src="ibiza.jpg" alt> <img src="ankor-wat.jpg" alt> <img src="austin-fireworks.jpg" alt> </figure> <div id="navbar"> <nav> <a href="">Home</a> </nav> </div> <figure id="captions"> <span class="caption">some caption text 1</span> <span class="caption">some caption text 2</span> <span class="caption">some caption text 3</span> <span class="caption">some caption text 4</span> <span class="caption">some caption text 5</span> </figure> </div> </div><!-- End of Header--> </div> <!-- End of Full Body Wrapper-->

Answer 1

I solved it by myself. I wrapped the caption div in one other div then I set it to use absolute position and it is working fine.