Position 文本居中在图像顶部

Question

I'm creating a navigation bar where, initially, you have images. Upon hovering over them, the image's opacity goes down to 0 and text's goes up to 1. So the text should replace the image. I have done so, but the problem I'm trying to solve is to position text on top of the image centered both horizontally and vertically.

Only the first one of the list has CSS applied, thought I would figure out on one element first and then apply solution to the rest later.

Here's my codepen: https://codepen.io/Cryptooo/pen/NWGwQwv

 .menu-icons li { margin-top: 50%; }.menu-icons { display: flex; flex-direction: column; align-items: center; }.menu-center { display: flex; flex-direction: column; align-items: center; } #home { height: 25px; width: 27px; }.menu-center #home, .menu-center.home-txt { transition: opacity 0.3s ease-in-out; }.menu-center.home-txt { position: absolute; color: #08efcc; opacity: 0; }.menu-center:hover #home { opacity: 0; }.menu-center:hover.home-txt { opacity: 1; }

 <nav class="menu-section"> <ul class="menu-icons"> <div class="menu-center"> <li> <a href="#"><img id="home" src="/Images/Home.png"></a> </li> <div class="home-txt">Home</div> </div> <div class="menu-center"> <li> <a href="#"><img id="about" src="/Images/About.png"></a> </li> <div class="about-txt">About</div> </div> <div class="menu-center"> <li> <a href="#"><img id="skills" src="/Images/Skills.png"></a> </li> <div class="skills-txt">Skills</div> </div> <div class="menu-center"> <li> <a href="#"><img id="work" src="/Images/Work.png"></a> </li> <div class="work-txt">Work</div> </div> <div class="menu-center"> <li> <a href="#"><img id="contact" src="/Images/Contact.png"></a> </li> <div class="contact-txt">Contact</div> </div> </ul> </nav>

Answer 1

Here is how it works for me, assuming I understand your question!

 .menu-icons li { margin-top: 50%; list-style-type: none; }.menu-icons { display: flex; flex-direction: column; align-items: center; }.menu-center { position: relative; display: flex; flex-direction: column; align-items: center; } #home { height: 25px; width: 27px; }.menu-center #home, .menu-center.home-txt { transition: opacity 0.3s ease-in-out; }.menu-center.home-txt { position: absolute; left: 0; width: 100%; top: 0; height: 100%; display: flex; align-items: center; justify-content: center; color: #08efcc; opacity: 0; }.menu-center:hover #home { opacity: 0; }.menu-center:hover.home-txt { opacity: 1; }

 <nav class="menu-section"> <ul class="menu-icons"> <div class="menu-center"> <li> <a href="#"><img id="home" src="/Images/Home.png"></a> </li> <div class="home-txt">Home</div> </div> <div class="menu-center"> <li> <a href="#"><img id="about" src="/Images/About.png"></a> </li> <div class="about-txt">About</div> </div> <div class="menu-center"> <li> <a href="#"><img id="skills" src="/Images/Skills.png"></a> </li> <div class="skills-txt">Skills</div> </div> <div class="menu-center"> <li> <a href="#"><img id="work" src="/Images/Work.png"></a> </li> <div class="work-txt">Work</div> </div> <div class="menu-center"> <li> <a href="#"><img id="contact" src="/Images/Contact.png"></a> </li> <div class="contact-txt">Contact</div> </div> </ul> </nav>