How to set RadioButtonList items vertical alignment in asp.net

radiobuttonlist items vertical alignment
RadioButtonList is an asp.net list web server control. RadioButtonList server control render a single selection radio button group in web browser. RadioButtonList can be populate dynamically through data binding or statically by declarative syntax.

the following asp.net c# example code demonstrate us how can we align radiobuttonlist items vertically. RadioButtonList server control have no built in property or method to apply vertical alignment for its items. so that we need to take advantage from css style to vertically align radiobuttonlist items.

in the page header section we created a css style to assign vertical align of radiobuttonlist item. radiobuttonlist server control render its items in a html table on web browser. so we set the table column's (td) vertical alignment css to vertically align radiobuttonlist items. this is a very simple technique. at last we attach the css class to radiobuttonlist control using its CssClass property.
radiobuttonlist-vertical-alignment.aspx

<%@ Page Language="C#" AutoEventWireup="true"%>    
      
<!DOCTYPE html>
        
<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    { 
        if(!Page.IsPostBack)
        {
            RadioButtonList1.Items.Add(new ListItem("Northern Mockingbird", "1"));
            RadioButtonList1.Items.Add(new ListItem("Gray Catbird", "2"));
            RadioButtonList1.Items.Add(new ListItem("Sage Thrasher", "3"));
            RadioButtonList1.Items.Add(new ListItem("Socorro Mockingbird", "4"));
            RadioButtonList1.Items.Add(new ListItem("Brown Thrasher", "5"));
        }
    }
</script>        
        
<html xmlns="http://www.w3.org/1999/xhtml">        
<head id="Head1" runat="server">        
    <title>asp.net radiobuttonlist vertical alignment</title>
    <style type="text/css">
        .radiobuttonlist {
        }
        .radiobuttonlist td{
            border:1px solid green;
            height:50px;
            vertical-align:bottom;
        }
    </style>
</head>        
<body>        
    <form id="form1" runat="server">        
    <div>        
        <h2 style="color:MidnightBlue; font-style:italic;">        
            asp.net example - radiobuttonlist vertical alignment
        </h2>        
        <hr width="550" align="left" color="Gainsboro" />        
        <asp:Label       
            ID="Label1"       
            runat="server"      
            Font-Size="Large"
            Width="350"
            Text="radiobuttonlist vertical alignment bottom"
            >      
        </asp:Label>      
        <br /><br />
        <asp:RadioButtonList 
            ID="RadioButtonList1"
            runat="server"
            RepeatDirection="Vertical"
            AutoPostBack="true"
            RepeatLayout="Table"
            CssClass="radiobuttonlist"
            >
        </asp:RadioButtonList>  
    </div>        
    </form>        
</body>        
</html>
More asp.net examples