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

I have been messing around with asp.net for awhile now and always have issues aligning objects with various heights on the same row. For example, in this case, I have a search label, a text field, then a image button. What is the "proper way" to get these three items to align properly?

我现在已经在使用asp.net一段时间了，并且始终存在在同一行上对齐具有不同高度的对象的问题。例如，在这种情况下，我有一个搜索标签，一个文本字段，然后是一个图像按钮。让这三个项目正确对齐的“正确方法”是什么？

My existing code:

我现有的代码：

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

2 个解决方案

#1

The easiest is using CSS or tables. I put a div around with a height and vertical align to the top. CSS Reference

最简单的是使用CSS或表。我把一个div放在一个高度和垂直对齐的顶部。 CSS参考

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

#2

i had the same problem and i think that using a table or a div only to align the Textbox it's excessive.

我有同样的问题，我认为只使用表格或div来对齐文本框它是过度的。

I solved simply:

我简单地解决了：

<asp:TextBox ID="TextBox2" runat="server" Width="60px"></asp:TextBox>&nbsp;
<asp:ImageButton ID="ImageButton1" runat="server" 
                 ImageUrl="~/imatges/imgNou.png"
                 CssClass="style3" ImageAlign="AbsBottom" />

And adding the margin-top in Design view, the IDE added:

在Design视图中添加margin-top，IDE添加了：

.style3
{
    margin-top: 6px;
}

#1