HTML / CSS水平对齐Radio和Images标签

Question

我尝试将我的图像水平对齐我的收音机盒：

以下是我使用的代码：

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

Answer 2

您可以使用Flexbox将其居中

.radio46 {
    opacity: 0.5;
    display: flex;
    align-items: center;
}

或传统方式

.radio46 {
    opacity: 0.5;   
}
input, img {
    vertical-align: middle;
    display: inline-block;
}

Fiddle

Answer 3

.radio46 * 
{
    vertical-align: middle;                
}

当图像的高度相对较大时，您可以看到它正常工作。