icon center align vertically and horizontally

Question

I am trying to vertically and horizontally center align a small icon that I am putting on top of an image.

Relevant html part:

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

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

The output looks like the following:

I would appreciate any help as to how I can align the icons right. Thanks!

try http://stackoverflow.com/questions/19461521/how-to-center-an-element-horizontally-and-vertically — DrevanTonder, Feb 08 '17 at 09:57
You l need to show more of your code. Ideal would be if you could give us a demo @ https://jsfiddle.net/ to Fiddle around with! — John Slegers, Feb 08 '17 at 10:18

score 2 · Accepted Answer · answered Feb 08 '17 at 10:12

Put all img tag in div of container class, and give left:50%; and top:50%; property to img.See the example code below:

<!DOCTYPE html>
  <html>
    <head>
      <style>
      .container {
        position: relative;
        width: 50%;
      }

      .image {
        display: block;
        width: 100%;
        height: auto;
      }


      .text {
        color: white;
        font-size: 20px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        z-index:1;
      }
      </style>
    </head>
    <body>
    <div class="container">
      <img src="img_avatar.png" alt="Avatar" class="image">
      <div class="text">Kiran</div>
    </div>
  </body>
</html>

score 1 · Answer 2 · answered Feb 08 '17 at 10:04

1

add to your .test where the play botton is

.test {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

answered Feb 08 '17 at 10:04

Oke Tega

850
10
21

icon center align vertically and horizontally

2 Answers2