个人中心
gpt4 book ai didi

html - 图标中心垂直和水平对齐

转载 作者：太空宇宙 更新时间：2023-11-03 22:45:33 24 4
gpt4 key购买 nike

我试图垂直和水平居中对齐我放在图像顶部的小图标。

相关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;
}

输出如下所示: enter image description here

如果能帮助我正确对齐图标，我将不胜感激。谢谢!

最佳答案

将所有img标签放在容器类的div中，并给left:50%；和顶部:50%； img 的属性。请参见下面的示例代码:

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

关于html - 图标中心垂直和水平对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42109823/

24 4 0
文章推荐： Python ImageGrab 和 OpenCV
文章推荐： c# - 从 Form Flow 获取数据并将其输入到 api 调用中
文章推荐： python - OpenCV:将 Rodrigues() 的旋转矩阵应用于一个点
文章推荐： c# - 在事件上使用 GUI 功能 (MVVM)
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com