Я пытаюсь по вертикали и по горизонтали выровнять по центру небольшой значок, который я помещаю поверх изображения.icon center align vertical and horizontally
Соответствующий HTML часть:
<li>
<a href="#">
<span class="test fa fa-play"></span>
<img src="thumbnail1-l.jpg" alt="">
</a>
</li>
<li>
<a href="#">
<span class="test fa fa-play"></span>
<img src="thumbnail2-l.jpg" alt="">
</a>
</li>
<li>
<a href="#">
<span class="test fa fa-play"></span>
<img src="thumbnail3-l.jpg" alt="">
</a>
</li>
<li>
<a href="#">
<span class="test fa fa-play"></span>
<img src="thumbnail4-l.jpg" alt="">
</a>
</li>
CSS часть
.photo-list.cols-2 li {
width: 50%;
}
.photo-list li {
float: left;
width: 25%;
padding: 8px;
opacity: .8;
transition: opacity .3s ease-in-out;
}
.test{
position: absolute;
z-index: 1000000000;
font-size: 30px;
width: 60px;
height: 60px;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
}
Выход выглядит следующим образом:
Я был бы признателен за любую помощь, о том, как я могу выровнять иконки правильно. Благодаря!
попробовать http://stackoverflow.com/questions/19461521/how-to-center-an-element-horizontally-and-vertically – DrevanTonder
Вы л потребность показать больше вашего кода. Идеал был бы, если бы вы могли дать нам демонстрацию @ https://jsfiddle.net/, чтобы Скриншот с! –