为按钮设置垂直对齐方式

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文件和用户控件都在同一个文件夹中。

- danish

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

- Keltex

---

垂直对齐（vertical-align）与文本对齐（text-align）的功能不同。垂直对齐是相对于元素的容器和兄弟元素进行对齐。请参考http://www.w3schools.com/Css/pr_pos_vertical-align.asp。 - Jonathan Fingland

Answer 2

应该是：

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

ButtonClass 指的是 ButtonClass 元素，例如 <ButtonClass>...</ButtonClass>（在这种情况下当然是不正确的），.ButtonClass 指的是具有 class 为 ButtonClass 的元素。

- Jonathan Fingland

---

非常感谢。但是底部对齐的问题仍未解决。除了将控件放在 div 中，没有其他方法吗？ - danish

Answer 3

是的，您需要为“td”元素而不是按钮使用它。如果应用于按钮，则会垂直对齐到单元格中心的行。当应用于表格单元格时，行将与单元格底部对齐。

- nonopolarity