Css 如何将图像与单选按钮对齐？

我有3张mXn像素的图像（大约），但在渲染时，由于放大问题，图像大小会增加，如下所示：

下面是html代码

<div class="cardtype">
                <label>Cardtype:</label>
                <input type="radio" name="cardtype" value="visa"><img src="visa.png"> VISA
                <input type="radio" name="cardtype" value="amex"><img src="amex.png"> AMEX
                <input type="radio" name="cardtype" value="mastercard"><img src="mastercard.png"> Master card
</div>

如何水平对齐

img

和

input

单选按钮

这与图像大小有关吗？如何确定图像大小

---

这与图像分辨率有关吗？如何确定图像分辨率？

您可以选择标签中的单选按钮，并在标签中对该图像进行填充，例如：-

<div class="cardtype">
    <label>Cardtype:</label>
    <label class="radio">
        <input type="radio" name="cardtype" value="visa"><img src="visa.png"> VISA
    </label>
    <label class="radio">
        <input type="radio" name="cardtype" value="amex"><img src="amex.png"> AMEX
    </label>
    <label class="radio">
        <input type="radio" name="cardtype" value="mastercard"><img src="mastercard.png"> Master card
    </label>
</div>

尝试此方法（使用垂直对齐）：

CSS

.cardtype img{
    width: 8%;
    vertical-align: middle;
}

---

尝试将大小设置为图像包装，而不是直接设置为图像。

以下是您的操作方法。这将适用于任何图像大小

在图像周围添加跨距以帮助定位我给它的类助手，您还需要添加一点css

添加以下css：

.helper {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    width: 8%;
}
.helper img {
    vertical-align: middle;
    max-height: 25px;
}

---

在这里试试：

可以使用“垂直对齐”属性来对齐顶部、底部或中间。明白了。但是我如何决定（下载的）图像的大小呢？当前图像大小为658x202像素。这不是问题吗？尝试调整此页面的大小源代码：是，但是尝试拍摄美国运通/万事达卡/visa卡图像，您会发现结果不同。在您的案例中，您尝试了3幅相同大小的图像（VISA.png），您的意思是什么？是的，我是输出，它看起来不错

.cardtype img{
    width: 8%;
    vertical-align: middle;
}

.helper {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    width: 8%;
}
.helper img {
    vertical-align: middle;
    max-height: 25px;
}