CODEWITHSUNDEEP
htmlcss
Chris Palmer Breuer
Chris Palmer Breuer

Reputation: 690

icon center align vertically and horizontally

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: enter image description here

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

Upvotes: 0

Views: 63

Answers (2)

KiranPurbey
KiranPurbey

Reputation: 335

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>

Upvotes: 2

Oke Tega
Oke Tega

Reputation: 883

add to your .test where the play botton is

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

Upvotes: 1

Related Questions