Question

i am trying to vertically align the table present in the panel but i cant and when i apply style properties to the table it does not work ? means there would be no effect of style property on it as my code is given below,

<asp:Panel ID="Panel1" runat="server" 
        style="z-index:0;left:250px;position:absolute;top:160px; height: 160px; padding:10" 
        BackColor="Green" Width="300px">
        <div style="width: 295px; height: 155px;" align= "center">
        <table style="height: 48px; width: 187px; margin-left:0px;  min-height:14px; min-width:55px; vertical-align:bottom" align="center" bgcolor="green" >
    <tr>
    <td>
        <asp:Label ID="Label2" runat="server" Text="UserName" ForeColor="White"></asp:Label>
    </td>
    <td>
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
    </td>
    </tr>
    <tr>
    <td>
        <asp:Label ID="Label3" runat="server" Text="Password" ForeColor="White"></asp:Label>
    </td>
    <td>
        <asp:TextBox ID="TextBox2" textmode="Password" runat="server"></asp:TextBox>
    </td>
    </tr>
    <tr>
    <td>
        <asp:Label ID="Label4" runat="server" ForeColor="White"></asp:Label>
    </td>
    <td>
        <asp:Button ID="Button1" runat="server" Text="Login" onclick="Button1_Click" />
    </td>
    </tr>
    </table>
    </div>
   </asp:Panel>  

Hopes for your suggestions

Answer 1

Vertical alignment of some content within parent container is always tricky if you don’t know the height of the content. Solution is to have a wrapper div in between parent & content elements. Then have outer container with "display:table" and wrapper div with "display:table-cell" aligned vertically in middle. See this fiddle for the illustration: http://jsfiddle.net/myXL3/3/

For complete information on this approach, see this excellent article: http://www.jakpsatweb.cz/css/css-vertical-center-solution.html