設置垂直 - 對齊按鈕

Question

我有一個用戶控件。 在那里，我添加了一個HTML表，其中有一個按鈕。 我需要將按鈕對齊到單元格的底部。 我嘗試在CSS文件中設置屬性，但未應用樣式。 我做錯了什么？

ASCX文件：

<link href="CSSFile.css" rel="stylesheet" type="text/css" />
.
.
.
<td>
  <asp:Button ID="btnOK" runat="server" Text="OK" Width="66px" CssClass="ButtonClass"/>
  <asp:Button ID="btnClose" runat="server" Text="Close" Width="66px"/>
</td>

CSS文件：

ButtonClass
{
  border: thin groove #000000;
  vertical-align: bottom;
  color: #000000;
  background-color: #99FFCC;
}

CSS文件和用戶控件位於同一文件夾中。

Answer 1

您需要在單元格上設置樣式，而不是按鈕本身：

<td class='ButtonCell'>
  <asp:Button ID="btnOK" runat="server" Text="OK" Width="66px" CssClass="ButtonClass"/>
  <asp:Button ID="btnClose" runat="server" Text="Close" Width="66px"/>
</td>

在你的Css中：

.ButtonCell
{
  vertical-align:bottom;
}

Answer 2

應該：

.ButtonClass
{
  border: thin groove #000000;
  vertical-align: bottom;
  color: #000000;
  background-color: #99FFCC;
}

ButtonClass將引用ButtonClass元素，例如<ButtonClass>...</ButtonClass> （在這種情況下當然不正確）, .ButtonClass引用具有ButtonClass類的ButtonClass

Answer 3

是的，你需要它為“td”元素，而不是按鈕。 如果您應用於按鈕，它將垂直對齊線，該線位於單元格的中心。 當您應用於表格單元格時，該行將與單元格的底部對齊。