Question

我有一个iFrame，它的源设置为另一个aspx页面。

子aspx页面很简单，它只有一个包含两行和两列的表（表中有两个标签和两个控件）。

问题在于中心。 iFrame的高度为425像素。该表（在子aspx页面中）并不高。它水平居中，问题是让它垂直居中。这是一个俗气的图形表示：

转换此

iFrame
---------------
|    ----     |
|    |Tb|     |
|    ----     |
|             |
|             |
---------------

进入这个：

iFrame
---------------
|             |
|    ----     |
|    |Tb|     |
|    ----     |
|             |
---------------

当然，我的现有代码：

<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:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    </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">
            &nbsp;</td>
        <td class="style3">
            &nbsp;</td>
    </tr>
    <tr>
        <td class="style2">
    Reasons:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    </td>
        <td class="style3">
    <asp:ListBox ID="txtReasons" runat="server" Width="266px" 
        SelectionMode="Multiple"></asp:ListBox>
        </td>
    </tr>
    <tr>
        <td class="style2">
            &nbsp;</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>

有什么想法吗？

谢谢，

杰森

Answer 1

您可以将iFrame的大小设置得足够小，以适合您的子页面。然后在页面上根据需要对齐iFrame。这样就简单了。

如果您希望您的子页面在垂直中心显示它的表格，那么它应该是唯一的表格。它应放在另一个容器内，可能在另一个表的td。

使用outter表的style属性填充整个页面。将表格的样式设置为屏幕中心。

试试这段代码。

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

垂直对齐页面中的表（ASP.NET）

1 个答案: