Question

我有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>

以下是CSS代码，

.cardtype input{
                width: 8%;
            }
.cardtype img{
                width: 8%;
            }

如何水平对齐img和input单选按钮？

这与图像尺寸有关吗？如何确定图像尺寸？

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

Answer 1

http://www.bootply.com/pYw1JhTXOW

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

Answer 2

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

<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： -

.radio img{
   padding-top : 5px; //take as per your img these just for example
}

Answer 3

试试这个（使用vertical-align）：

<强> CSS

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

<强> DEMO HERE

Answer 4

这是你如何做到的。这适用于任何图像尺寸。

在图像周围添加跨度以帮助定位它我给它了类助手，你还需要添加一点css。

添加此css：

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

在此处尝试：http://jsfiddle.net/kLbvh139/

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

4 个答案: