Alignment in radiobuttonlist, text and pictures are offset

Question

Image of the offset problem

So this is what I get when I try to make a radiobuttonlist in vertical mode without any settings, could someone help me get everything aligned? Feels like i tried everything...

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

I could absolutley use css, I just cant get it to work! Must be missing something! — Andreas, Aug 03 '12 at 07:31
So you want a vertically aligned RadioButtonList? Assuming you've tried setting `RepeatDirection="Vertical"`? Also, the closing tag here should be `` rather than ``. — Elliott, Aug 03 '12 at 07:46

score 2 · Answer 1 · answered Aug 08 '12 at 12:04

The code which i used to fix the alignment:

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

score 1 · Accepted Answer · edited May 23 '17 at 11:53

Update (misunderstood the question at first, see comment below):

Have you seen this SO-question? It is not exactly the same situation, but pretty close. You should be able to do this by giving your elements a CSS class, then styling that to remove any margins and align it to for instance middle or bottom (like vertical-align:middle).

If this does not work, you might want to try vertically aligning to center, then adding some margin-distance to the top until the elements are positioned where you want them.

Note: You might have to use the type <asp:RadioButton CssClass="YourClass" /> to do this though; I'm not quite sure if it will work directly on an <li> element.

My previous answer:

I haven't tested this, but the following seems logical, and seems to be supported by the MSDN documentation (changed "horizontal" to "vertical"):

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

    (...)
</RadioButtonList>

I still want it horizontal, the problem is that the parts of the radiobuttonlist arent aligned. — Andreas, Aug 03 '12 at 08:30
The SO-question link did it... changed my css accordingly, which did the trick! — Andreas, Aug 08 '12 at 12:02

Alignment in radiobuttonlist, text and pictures are offset

2 Answers2