Setting Vertical-Align for a Button

Question

I have a user control. In this, I added an HTML table in which there is a button. I need the buttons to be aligned at the bottom of the cell. I tried to set the property in the CSS file, the style is not applied. What am I doing wrong?

ASCX file:

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

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

The CSS file and user control are in the same folder.

Answer 1

Must be:

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

ButtonClass will refer to ButtonClass elements, for example. <ButtonClass>...</ButtonClass> (which, of course, is not true in this case), .ButtonClass refers to elements that have the ButtonClass class

Answer 2

You need to set the style in the cell, and not in the button itself:

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

In your css:

 .ButtonCell { vertical-align:bottom; } 

Answer 3

yes, you need this for the td element, not the button. if you apply to a button, it will be vertically aligned with the line that is centered in the cell. when you apply to the table cell, the line will be aligned at the bottom of the cell.