RadioButton and list, text not in line with radio

Hello I've got something like this

        <asp:RadioButtonList ID="RadioButtonList1"
            RepeatColumns="2"
            RepeatDirection="Vertical"
            RepeatLayout="Table"
            TextAlign="Left"
            runat="server">
             <asp:ListItem Text="Nacional" Value="nacional" />
             <asp:ListItem Text="Departamental" Value="departamental" />
             <asp:ListItem Text="Politica" Value="politica" />
             <asp:ListItem Text="Sociales" Value="social" />
             <asp:ListItem Text="Policial" Value="policial" />
             <asp:ListItem Text="Deportes" Value="deporte" />
        </asp:RadioButtonList>

As you can see the Text is slightly higher and it looks really odd, why does this happen?

here I added the html

    <div class="formline">
        <table id="MainContent_RadioButtonList1">
<tr>
    <td><label for="MainContent_RadioButtonList1_0">Nacional</label><input id="MainContent_RadioButtonList1_0" type="radio" name="ctl00$MainContent$RadioButtonList1" value="nacional" /></td><td><label for="MainContent_RadioButtonList1_3">Sociales</label><input id="MainContent_RadioButtonList1_3" type="radio" name="ctl00$MainContent$RadioButtonList1" value="social" /></td>
</tr><tr>
    <td><label for="MainContent_RadioButtonList1_1">Departamental</label><input id="MainContent_RadioButtonList1_1" type="radio" name="ctl00$MainContent$RadioButtonList1" value="departamental" /></td><td><label for="MainContent_RadioButtonList1_4">Policial</label><input id="MainContent_RadioButtonList1_4" type="radio" name="ctl00$MainContent$RadioButtonList1" value="policial" /></td>
</tr><tr>
    <td><label for="MainContent_RadioButtonList1_2">Politica</label><input id="MainContent_RadioButtonList1_2" type="radio" name="ctl00$MainContent$RadioButtonList1" value="politica" /></td><td><label for="MainContent_RadioButtonList1_5">Deportes</label><input id="MainContent_RadioButtonList1_5" type="radio" name="ctl00$MainContent$RadioButtonList1" value="deporte" /></td>
</tr>

Solution

The dafault behavior of the RadioButtonList control is to display the text and the radio button adjecent to one another,if they are not adjecent it means somewhere in your web application you have a CSS rule which changed the default behavior.

You can use F12 in Google Chrome to inspect the HTML and CSS and try find which style rule is causing the problem:

You can also try adding the style rule below to the page where you have the RadioButtonList control, just make sure you add it after all the other CSS refrences:

<style type="text/css">
    table#RadioButtonList1 td
    {
        vertical-align:top;
        height:100px;
    }
</style>