Question

我一直试图将图像（图标）居中放置在按钮内，这在大多数情况下都是有效的。图像位于按钮内部居中，但是每当我缩小分辨率时，图像就会在按钮外部裁剪。有什么办法解决这个问题？感谢您的浏览，对此我非常感谢！

试图调整按钮的填充，使用绝对位置和居中位置，甚至尝试margin：auto

html

<figure>
    <img class="imgpers" src="../media/opel/Adam.jpg" alt="Opel Adam">
    <figcaption>naam: Opel Adam<br>prijs: 13.050,00<br>release date:</figcaption>
    <button>
        <img class="persButton" src="../media/favicon/Webp.net-resizeimage%20(1).png" alt="checkout">
    </button>
</figure>

css

figure {
    position:relative;
    display: flex;
    align-items: center;
    background: #c9d0d4;

}
figure > button {
    position: absolute;
    right: 2%;
    font-size: 36px;
    background: dimgrey;
    border: none;
    width: 10%;
    height: 25%;

}
.persButton {
    position: center;
    width: 20%;
    height: 50%;
}


figcaption {
    margin-left:3%;
    color: #494949;
    text-align: left;
    font-size: 36px;
    font-family:'Verdana', sans-serif;


}

Answer 1

使用flex <3的现代居中方法：

button {
 display:flex;
 justify-content: center;
 align-items: center;
}

Answer 2

只需赋予图像这些属性

img {
    max-width: 100%;
    max-height: 100%;
}

如何使图像居中放置在按钮中

2 个答案: