Question

我对CSS很陌生。我想出了如何在按钮中放置图片，以及如何使用填充在按钮的矩形内移动图片。但是当我开始在页面上添加更多按钮时，每个按钮的填充都发生了变化。我认为这是因为我需要某种方式，但是一旦我开始使用div时，我就以某种方式弄乱了填充，但我不知道该如何解决。我也尝试将按钮内的图片居中（使用最高百分比并进行翻译），但它只是移动了整个按钮。我需要一种使页面上每个按钮上的每张图片居中或至少具有填充的方法，这样我就可以针对每张图像将其自己居中。

Here's a picture of some of my buttons. 底部的按钮正是我想要的，但是顶部的按钮没有居中，因为图像大小不同。但是，当我更改一个代码时，另一个按钮也会更改。

<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width = device-width, initial-scale =1">
<style>
    .button {
        background-color: #FFC627;
        border: none};
        border-radius: 20px;
        color: white;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        margin: 4px 20px;
        cursor: pointer;
        height: 200px;
        width: 200px;
    }
    .roles-and-responsibilities {
        padding-top: 10px;
        padding-bottom: 4px;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }
    .button:hover {background-color: #5C6670}
    .buttoniactive {
        background-color: #5C66703
        transform: translateY (4px);
}
</style>
</head>
<body>
<div class = "roles-and-responsibilities">

如何在按钮内移动图像？

0 个答案: