Расположите текст по центру сверху изображения

Question

Я создаю панель навигации, где изначально у вас есть изображения. При наведении на них непрозрачность изображения уменьшается до 0, а текста - до 1. Таким образом, текст должен заменить изображение. Я сделал это, но проблема, которую я пытаюсь решить, состоит в том, чтобы расположить текст поверх изображения по центру по горизонтали и вертикали.

Только к первому из списка применяется CSS, подумал я вычислил бы сначала один элемент, а затем применил решение к остальным.

Вот мой кодовый блок: 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

Вот как это работает для меня, если я понимаю ваш вопрос!

	.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>