如何使切换按钮和文本垂直堆叠，以使它们的中心对齐？

Question

如何使切换按钮和文本垂直堆叠，以使它们的中心对齐？

3

我有以下代码来创建“收藏”按钮：

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

以下是页面的布局：

enter image description here

我希望元素能够对齐，如下所示：

enter image description here

星号和文本的中心对齐。

我感觉自己可能漏掉了一些显而易见的东西，但我找不到正确的搜索词来揭示答案。

- ChrisF

我也遇到了一些问题，无法获取ToggleButtonExtender，因为它忽略了周围面板中设置的对齐方式，这些问题可能有关联。 - ChrisF

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Tony Hinkle · Accepted Answer

这可能不是最理想的方法，但您可以将复选框和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>