How do I get a toggle button and text to stack vertically so that their centres align?

Question

I have the following code to create a "favourites" button:

    <div>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <asp:CheckBox ID="CheckBox1" runat="server" />
                <asp:ToggleButtonExtender ID="ToggleButtonExtender1" runat="server"
                    TargetControlID="CheckBox1"
                    ImageWidth="24"
                    ImageHeight="24"
                    UncheckedImageUrl="~/ClientBin/images/icons24x24/openstar.png"
                    CheckedImageUrl="~/ClientBin/images/icons24x24/filledstar.png"
                    CheckedImageAlternateText="Check"
                    UncheckedImageAlternateText="UnCheck"></asp:ToggleButtonExtender>
                <br />
                <asp:Label runat="server"
                    Text="Favourite"
                    font-size="8"
                    font-name="Verdana"></asp:Label>
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>

Which gives me the following layout on the page:

What I would like is for the elements to be aligned something like this:

with the star's and text's centre's aligned.

I feel I'm missing something obvious, but I can't find the right search terms to reveal the answer.

Answer 1

This may not be ideal, but you can place the Checkbox and ToggleButtonExtender in a table of a certain size, and then nudge the image to the right using cell padding:

<div style="margin-left: 1in; margin-top: 1in; width: 24px; text-align: center">
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <table style="width: 75px">
                <tr>
                    <td style="padding-left: 12px">
                        <asp:CheckBox ID="CheckBox1" runat="server" />
                        <asp:ToggleButtonExtender ID="ToggleButtonExtender1" runat="server"
                            TargetControlID="CheckBox1"
                            ImageWidth="24"
                            ImageHeight="24"
                            UncheckedImageUrl="star_24x24.bmp"
                            CheckedImageUrl="star_24x24.bmp"
                            CheckedImageAlternateText="Check"
                            UncheckedImageAlternateText="UnCheck">
                        </asp:ToggleButtonExtender>
                    </td>
                </tr>
            </table>
            <asp:Label runat="server"
                Text="Favourite"
                Font-Size="8"
                font-name="Verdana"></asp:Label>
        </ContentTemplate>
    </asp:UpdatePanel>