时间戳

首页 > 解决方案 > 在 CSS 形状的顶部居中图像？

html - 在 CSS 形状的顶部居中图像？

问题描述

我正在尝试将图像居中放置在使用 CSS 制作的 Hexagon 上。

我目前拥有的代码是：

.img-social {
    width: 25px;
    height: 25px;
   
}

.hexagon {
    position: relative;
    width: 35px; 
    height: 20.21px;
    background-color: #525555;
    margin: 10.10px 0;
}
  
.hexagon:before,
.hexagon:after {
    content: "";
    position: absolute;
    width: 0;
    border-left: 17.5px solid transparent;
    border-right: 17.5px solid transparent;
}

.hexagon:before {
    bottom: 100%;
    border-bottom: 10.10px solid #525555;
}

.hexagon:after {
    top: 100%;
    width: 0;
    border-top: 10.10px solid #525555;
}
<li class="img-social-container">
     <div class="hexagon"></div>
     <a><img class="img-social" src="icons/logo-github.png" alt="github"></a>
</li>

我还希望图像位于六边形之上，这是我遇到的另一个问题。

标签： htmlcss

解决方案

就动一下？我有点确定这不是最好的解决方案，但仍然如此。

.img-social {
        width: 25px;
        height: 25px;
        position: relative;
        bottom: 32.5px;
        left: 5px;
        margin: 0;
    }

推荐阅读