如何在面板中放置表格c# Web应用程序

本文关键字：表格 Web 应用程序 | 更新日期: 2023-09-27 18:04:01

我试图垂直对齐面板中的表，但我不能，当我应用样式属性到表不工作?意味着不会有样式属性的影响，因为我的代码如下所示，

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

希望你的建议

如何在面板中放置表格c# Web应用程序

如果您不知道内容的高度，则父容器中的某些内容的垂直对齐总是很棘手。解决方案是在父类&内容元素。然后有"display:table"的外部容器和"display:table-cell"在中间垂直对齐的包装div。请看下面的图片:http://jsfiddle.net/myXL3/3/

有关此方法的完整信息，请参阅这篇优秀的文章:http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

这里的问题是，您在div元素中的表。将vertical-align:middle添加到div的样式应该可以工作。这假设div总是"高于"表(如代码片段中所示)。

(同样，你在table的样式中有空白，它们应该被删除，以确保它们不会干扰垂直对齐)

相关文章：