如何在ASP.NET中垂直对齐对象？

发布时间：2020-12-15 19:24:52 所属栏目：asp.Net 来源：网络整理

导读：我一直在和asp.net一起搞乱了一段时间,并且在同一行中总是有将对象与各种高度对齐的问题.例如,在这种情况下,我有一个搜索标签,一个文本字段,然后一个图像按钮.让这三个项目正确对齐的“正确方法”是什么？我现有的代码： asp:Content ID="HeaderContent" ru

我一直在和asp.net一起搞乱了一段时间,并且在同一行中总是有将对象与各种高度对齐的问题.例如,在这种情况下,我有一个搜索标签,一个文本字段,然后一个图像按钮.让这三个项目正确对齐的“正确方法”是什么？

我现有的代码：

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
   </asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <asp:Panel VerticalAlign="Center" runat="server">
    <asp:Label ID="Label1" runat="server" Font-Size="X-Large" Text="Search Tests:"></asp:Label>
    <asp:TextBox ID="searchTextBox" runat="server" Font-Size="X-Large" 
        Height="30px" style="margin-left: 13px; margin-top: 0px" Width="219px"></asp:TextBox>
    <asp:ImageButton ID="ImageButton2" runat="server" Height="45px" 
        ImageUrl="~/Images/SearchButton.PNG" style="margin-left: 18px; margin-top: 0px" 
        Width="95px" />
    </asp:Panel>
</asp:Content>

解决方法

最简单的是使用CSS或表.我把一个高度垂直的div放在顶部. CSS Reference

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <asp:Panel ID="Panel1" VerticalAlign="Center" runat="server">
        <div style="height: 40px; vertical-align: top">
            <div style="padding-top: 10px; float:left;">
                <asp:Label ID="Label1" runat="server" Font-Size="X-Large" Text="Search Tests:"></asp:Label>
            </div>
            <div style="padding-top: 5px; float:left;">
                <asp:TextBox ID="searchTextBox" runat="server" Font-Size="X-Large" Height="30px"
                     Style="margin-left: 13px; margin-top: 0px" Width="219px"></asp:TextBox>
            </div>
            <div style="padding-top: 5px; float:left;">
                <asp:ImageButton ID="ImageButton2" runat="server" Height="45px" ImageUrl="~/Images/SearchButton.PNG"
                     Style="margin-left: 18px; margin-top: 0px" Width="95px" />
            </div>
        </div>
    </asp:Panel>
</asp:Content>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!