Html 如何在 ASP.NET 中垂直对齐对象？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8319791/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to align objects vertically in ASP.NET?
提问by PFranchise
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>
采纳答案by Robert
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>
回答by Toni Torrents
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>
<asp:ImageButton ID="ImageButton1" runat="server"
ImageUrl="~/imatges/imgNou.png"
CssClass="style3" ImageAlign="AbsBottom" />
And adding the margin-topin Design view, the IDE added:
并margin-top在设计视图中添加，IDE 添加：
.style3
{
margin-top: 6px;
}
