将无线电标签与旁边的图像对齐

【问题标题】：Aligning radio tag to the image next to it将无线电标签与旁边的图像对齐
【发布时间】：2014-12-17 21:20:30
【问题描述】：

我想将我的单选标签与旁边的图片对齐。

图片宽度=“260”高度=“88”，标签包含在表格中

我试过了，但没有影响：

form input[type="radio"]{
    vertical-align: middle;
    margin-right: 10px;

}

这是表格：

<table  border="0" cellpadding="0" align="center">
    <tr>

        <td height="90">    
            <input type="radio" value="">
            <img src="/images.gif" width="260" height="88" />
         </td>
    </tr>
</table>

【问题讨论】：

标签： css image html-table

【解决方案1】：

您还需要将vertical-align: middle 添加到图像中。此外，由于您没有包裹单选按钮的 <form> 标签，因此您只需要 input[type="radio"] 使用 CSS 将样式应用于单选按钮。

input[type="radio"] {
    vertical-align: middle;
    margin-right: 10px;
    margin-top: 0px;

}

#image {
    vertical-align: middle;
}

<table  border="0" cellpadding="0" align="center">
    <tr>

        <td height="90">    
            <input type="radio" value="">
            <img src="http://placehold.it/350x150" id="image" width="260" height="88" />
         </td>
    </tr>
</table>

【讨论】：