Question

您可以在此link中查看结果。在页面的底部，在最右边，有一个带有T恤图像的圆圈。图像未垂直居中。

锚标记的CSS是： -

.dfa {
    padding: 5px 5px;
    font-size: 30px;
    width: 44px;
    text-align: center;
    text-decoration: none;
    margin: 5px 2px;
    border-radius: 50%;
    //line-height: 10px;
}

.dfa-tshirt {
    background: #2c4762;
    color: white;
}

HTML就是这样： -

<a href="https://disabilityloverstshirtbuilders.com/" class="dfa dfa-tshirt">
    <img src="https://png.icons8.com/color/100/t-shirt.png" style="width:35px; height:35; margin:auto; top:0; right:0; bottom:0; left:0;"/>
</a>

我该如何居中？目前，我正在使用img的内联css，稍后我会删除它到css文件。

Answer 1

我建议保持简单，让flex为你处理它。当图像改变大小或其他常见情况时，所有边距和填充都会加剧事情

＆＃13;

.dfa-tshirt {
    background: #2c4762;
}

a {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius:50%;
  width: 44px; height: 44px;
}
a img {
  width: 35px; height: 35px;
}

＆＃13;

    <a href="https://disabilityloverstshirtbuilders.com/" class="dfa-tshirt">
        <img src="https://png.icons8.com/color/100/t-shirt.png" />
    </a>

＆＃13;

编辑：非灵活解决方案 -

我无法为您可能拥有的每个场景做好计划，但为了回答您的问题并支持大多数浏览器，我还建议您只将实际样式移到图像上：

＆＃13;

a img {
  width: 30px; height: 30px;
  padding: 5px;
  border-radius: 50%;
  background: #2c4762;
}

＆＃13;

<a href="https://disabilityloverstshirtbuilders.com/">
  <img src="https://png.icons8.com/color/100/t-shirt.png" />
</a>

＆＃13;

Answer 2

图像父级需要以内联块显示

.dfa {
    padding: 5px 5px;
    font-size: 30px;
    width: 44px;
    text-align: center;
    text-decoration: none;
    margin: 5px 2px;
    border-radius: 50%;
    display: inline-block;
}

内联样式应该是

<img src="https://png.icons8.com/color/100/t-shirt.png" style="width: 35px; height: 35px;"/>

Answer 3

我刚检查过您的网站网址，您可以为该类添加两行，如下所示。

显示：表; float：right;

  .dfa {
        padding: 5px 5px;
        font-size: 30px;
        width: 44px;
        text-align: center;
        text-decoration: none;
        margin: 5px 2px;
        border-radius: 50%;
        display: table;
        float: right;
   }

Img标签

<img src="https://png.icons8.com/color/100/t-shirt.png" style="width: 35px; height: 35px;"/>

Answer 4

使用此功能：

img { vertical-align: middle; }

＆＃13;

.dfa {
    padding: 5px 5px;
    font-size: 30px;
    width: 44px;
    text-align: center;
    text-decoration: none;
    margin: 5px 2px;
    border-radius: 50%;
    line-height: 10px;
}

.dfa-tshirt {
    background: #2c4762;
    color: white;
}

img {
    vertical-align: middle;
    width:35px;
    height:35px;
}

＆＃13;

<a href="https://disabilityloverstshirtbuilders.com/" class="dfa dfa-tshirt">
    <img src="https://png.icons8.com/color/100/t-shirt.png">
</a>

＆＃13;

如何将图像置于锚标签内？

4 个答案: