How to keep an image centered in a button

Question

I have been trying to center an image(icon) inside of a button, which has worked for the most part. The image is centered inside of the button but whenever I scale the resolution down, the image clips outside of the button. Is there any way to solve this? Thanks for taking a look, I really appreciate this!

Tried to adjust the paddings of the button, worked with position absolute and center, even tried 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;


}

Why not move the image to the background of the button so that you can leverage `cover` or `contain` for the `background-size` property — Scuzzy, Aug 08 '19 at 09:01
I'm pretty new to html and css, I've only seen some basic things — Jelly1738, Aug 08 '19 at 09:05
There are several possible answers to your question already on Stackoverflow, for example [this one](https://stackoverflow.com/questions/34713763/force-an-image-to-fit-and-keep-aspect-ratio) — pjaj, Aug 08 '19 at 09:06
Have you tried adding style to your icon element - where you define your widths and height? like this [https://stackoverflow.com/questions/787839/resize-image-proportionally-with-css?rq=1] — Nompumelelo, Aug 08 '19 at 09:14

score 2 · Accepted Answer · answered Aug 08 '19 at 09:24

2

Modern center method using flex <3:

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

answered Aug 08 '19 at 09:24

Ethan Vu

2,911
9
25

Ethan, you are an absolute lifesaver! thank you ! – Jelly1738 Aug 08 '19 at 09:27
1

Flex is very cool – Scuzzy Aug 08 '19 at 09:32

score 0 · Answer 2 · answered Aug 08 '19 at 09:17

0

just give image these properties

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

answered Aug 08 '19 at 09:17

Robin Mehra

161
7

How to keep an image centered in a button

2 Answers2