How To Position Table Inside The Panel C# Web App?
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="Logi开发者_Python百科n" onclick="Button1_Click" />
</td>
</tr>
</table>
</div>
</asp:Panel>
Hopes for your suggestions
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
The problem here is that you have the table within a div
element. Adding vertical-align:middle
to the div
's style should work. This assumes that the div
is always "higher" than the table (as in your code snippet).
(Also, you have margins in your table
's style - they should be removed to make sure they are not interfering with the vertical alignment)
精彩评论