Vertically aligning a table in a page (ASP.NET)
I have an iFrame which has it's source set to another aspx page.
The child aspx page is simple, it just has a table with two rows and two columns (two labels and two controls inside the table).
Problem is centering. The iFrame's height is 425 px. The table (in the child aspx page) is not that tall. It cente开发者_运维问答rs horizontally alright, the problem is getting it to center vertically. Here's a cheesy graphical representation:
Transform this
iFrame
---------------
| ---- |
| |Tb| |
| ---- |
| |
| |
---------------
Into this:
iFrame
---------------
| |
| ---- |
| |Tb| |
| ---- |
| |
---------------
And, of course, my existing code:
<table width="100%" height="100%" border=0 cellpadding=0 cellspacing=0>
<tr><td width="100%" height="100%" valign="middle">
<table style="margin:0 auto" cellpadding=0 cellspacing=0>
<tr>
<td class="style2">
Date:
</td>
<td class="style3">
<asp:TextBox ID="txtDate" runat="server"></asp:TextBox><asp:CalendarExtender CssClass="cal_Theme1" ID="CalendarExtender1"
runat="server" PopupButtonID="txtDate" TargetControlID="txtDate">
</asp:CalendarExtender>
</td>
</tr>
<tr>
<td class="style2">
</td>
<td class="style3">
</td>
</tr>
<tr>
<td class="style2">
Reasons:
</td>
<td class="style3">
<asp:ListBox ID="txtReasons" runat="server" Width="266px"
SelectionMode="Multiple"></asp:ListBox>
</td>
</tr>
<tr>
<td class="style2">
</td>
<td class="style3"><div align=right><br />
<asp:LinkButton ID="GetPolicy" runat="server" BackColor="#20548E"
BorderColor="#20548E" BorderStyle="Solid" Font-Names="Tahoma" Font-Size="Small"
Font-Underline="False" ForeColor="White" Height="16px" Width="85px"> <center>
Send To Batch</center></asp:LinkButton></div></td>
</tr>
</table>
</td></tr></table>
Any ideas?
Thanks,
Jason
You can set the size of your iFrame to small enough to fit your child page. Then align the iFrame whereever you want on the page. This way it'll be simple.
If you want your child page to disply it's table in the vertical centre, it should be the table all alone. It should be placed inside another container, may be in another table's td.
Use the style property of outter table to fill the complete page. Set the style of your table to come to the centre of the screen.
Try this code.
<html>
<body>
<table width="100%" height="100%">
<tr>
<td align="center" valign="middle">
<table align="center">
<tr>
<td valign="middle">
1,1</td>
</tr>
<tr>
<td>
1,2</td>
</tr>
<tr>
<td>
2,1</td>
</tr>
<tr>
<td>
2,2</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
加载中,请稍侯......
精彩评论