如何将切换按钮和文本垂直堆叠以使其中心对齐？

Question

我有以下代码来创建＆＃34;收藏夹＆＃34;按钮：

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

这给了我页面上的以下布局：

我想要的是将元素对齐如下：

与明星和文字的中心对齐。

我觉得我错过了一些明显的东西，但我无法找到合适的搜索字词来揭示答案。

Answer 1

这可能不太理想，但你可以将Checkbox和ToggleButtonExtender放在一个特定大小的表中，然后使用单元格填充向右微移图像：

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