html - 如何使用 CSS ASP.NET 将按钮置于表格单元格的中心

Question

我正在学习 HTML 和 CSS，但我真的很苦恼如何让我的 CSS 在我的 HTML 中的对象上工作。特别是如何将按钮置于表格单元格的中心。我有:

#LeftButton {
   margin:auto;
   display:block;
}  

<asp:table runat="server" ID="outerTable">
            <asp:TableRow>
                 <asp:TableCell>
                    <asp:Label ID="lbLeftLabel" runat="server" Text="Resources NOT opening early"></asp:Label>
                 </asp:TableCell>
                <asp:TableCell>
                </asp:TableCell>
                 <asp:TableCell>
                    <asp:Label ID="lbRightLabel" runat="server" Text="Resources opening 1 hour early"></asp:Label>
                 </asp:TableCell>
            </asp:TableRow>
        <asp:TableRow>
            <asp:TableCell>
                <asp:ListBox ID="ListBox3" runat="server" Height="400px" Width="300px" DataSourceID="RISDataSource" DataTextField="DisplayValue" DataValueField="EntryCode" AutoPostBack="True" OnSelectedIndexChanged="ListBox3_SelectedIndexChanged"></asp:ListBox>
            </asp:TableCell>
            <asp:TableCell>
                <asp:Table runat="server" ID="innerTable">
                    <asp:TableRow>
                        <asp:TableCell>
                            <asp:ImageButton ID="RightButton" runat="server" Height="32px" Width="32px" ImageUrl="~/Images/right.png" BackColor="#efefef" BorderStyle="None" Enabled="False" OnClick="RightButton_Click" />
                        </asp:TableCell>
                     </asp:TableRow>
                    <asp:TableRow>
                        <asp:TableCell>
                           <asp:ImageButton ID="LeftButton" runat="server" Height="32px" Width="32px" ImageUrl="~/Images/left.png" BackColor="#efefef" BorderStyle="None" Enabled="False" OnClick="LeftButton_Click"/>
                        </asp:TableCell>
                     </asp:TableRow>
                </asp:Table>
            </asp:TableCell>
            <asp:TableCell>
               <asp:ListBox ID="ListBox2" runat="server" Height="400px" Width="300px" AutoPostBack="True" DataSourceID="ListBoxRIS_IC_WORK" DataTextField="DisplayValue" DataValueField="EntryCode" OnSelectedIndexChanged="ListBox2_SelectedIndexChanged"></asp:ListBox>
            </asp:TableCell>
        </asp:TableRow>
    </asp:table>

但是我的 CSS 似乎没有做任何事情。请指教。

Answer 1

试试这个:

HTML:

<table border='1' width='100%'>
    <tr>
        <td class="centerBtn">
            <button type="button"> test </button>
        </td>
    </tr>
</table>

CSS:

.centerBtn {
    text-align: center;
    vertical-align: middle;
}