HTML/CSS 水平对齐单选和图像标签

Question

我尝试将我的图像与我的单选框水平对齐:

这是我正在使用的代码:

<div class="radio46">
<input type="radio" name="colors" value="J"> <img class="couleur" src="Img.jpg" width="20" height="20" border="0" alt="Jaune">
<input type="radio" name="colors" value="V"> <img class="couleur" src="Img2.jpg" width="20" height="20" border="0" alt="Vert">
</div>

以及应用于它的 CSS:

.radio46{
font-size: 15px;
opacity: 0.5;
text-align: center;
margin: auto;
line-height:15px;
}

但是，我不知道如何修复它。

你能帮帮我吗？

Answer 1

将以下内容添加到您的 CSS 中

input, img{display:inline;
vertical-align:middle;}

Output