无线电列表，文本和图片中的对齐被抵消

Question

所以这是我在没有任何设置的情况下尝试在垂直模式下制作radiobuttonlist时所得到的，有人可以帮助我将所有内容对齐吗？感觉就像我尝试了一切...

<asp:RadioButtonList ID="selectionbuttonlist" 
                     runat="server" 
                     RepeatDirection="Horizontal"
                     OnDataBound="selectionbuttonlist_DataBound" 
                     AutoPostBack="true" 
                     RepeatLayout="Flow">
    <asp:ListItem Value="All" Selected="True">
        Allt
    </asp:ListItem>
    <asp:ListItem Value="A">
        <img src="../Images/PlanCategoryGeneral.gif" align="absmiddle" />
        Allmänt
    </asp:ListItem>
</RadioButtonList>

Answer 1

更新（首先误解了这个问题，见下面的评论）：

你见过this SO-question吗？情况并非完全相同，但非常接近。您应该能够通过为元素提供CSS类，然后设置除去任何边距并将其与例如middle或bottom（如vertical-align:middle）对齐来设置。

如果这不起作用，您可能需要尝试垂直对齐到中心，然后向顶部添加一些边距，直到元素位于您想要的位置。

注意：您可能必须使用类型<asp:RadioButton CssClass="YourClass" />来执行此操作;我不太确定它是否可以直接在<li>元素上运行。

我之前的回答：

我没有对此进行测试，但以下内容似乎合乎逻辑，似乎得到了MSDN documentation的支持（更改为“水平”到“垂直”）：

<asp:RadioButtonList ID="selectionbuttonlist" 
                 runat="server" 
                 RepeatDirection="Vertical"
                 OnDataBound="selectionbuttonlist_DataBound" 
                 AutoPostBack="true" 
                 RepeatLayout="Flow">

    (...)
</RadioButtonList>

Answer 2

我用来修复路线的代码：

  input[type=radio] {
    width: 13px;
    height: 13px;
    padding: 0;
    margin:0;
    vertical-align: middle;
    position: relative;
    top: -1px;
    *overflow: hidden;
}
    input[type=checkbox] {
    width: 13px;
    height: 13px;
    padding: 0;
    margin:0;
    vertical-align: middle;
    position: relative;
    top: -1px;
    *overflow: hidden;
}