Clever Geek Handbook

How do I get the toggle button and text to stack vertically so that their centers are aligned?

I have the following code to create a Favorites 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:

enter image description here

I would like the elements to be aligned something like this:

enter image description here

with star and text alignment.

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

+3


source to share


1 answer


It might not be ideal, but you can put a checkbox and ToggleButtonExtender in a table of a specific size and then nudge the image to the right by adding elements:



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


source






More articles:


All Articles