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

Posted 2023-03-05

【中文标题】如何在 ASP.NET 中垂直对齐对象？

【英文标题】：How to align objects vertically in ASP.NET?

【发布时间】：2012-01-09 07:49:02

【问题描述】：

我一直在使用 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>

【问题讨论】：

ASP 和 ASP.NET 不是一回事。你应该养成正确使用这两个术语的习惯，否则你可能得不到你期望的答案。

这个问题和ASP.NET关系不大。这几乎是一个 html 问题。弄清楚如何使用纯 HTML 来做这件事，你就会得到答案。

@Abe 对不起。以后发帖时我会牢记这一点。感谢您这次为我纠正问题。

【参考方案1】：

最简单的方法是使用 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>

【讨论】：

非常感谢您的回复。但是，所有三个项目仍然根据它们的垂直底部对齐。有没有办法让三个对象的中间对齐？如果我的问题中不清楚这种愿望，我深表歉意

我已经修改了代码以反映这一点：您需要将每一个放在自己的 div 标签中并调整 padding-top 以使它们对齐。唯一的问题是跨浏览器它们可能并不完全对齐，它们应该非常接近，但在每个浏览器上并不完全相同。

好的。非常感谢。这是大多数网站处理此类事情的方式吗？我觉得想要对齐这些对象将是一个常见的问题。

是的，这正是大多数人（如果不是全部）这样做的方式。 CSS 现在已经超过标准，因为它比表格更灵活。它曾经把所有东西都放在表格中，但是你会得到一个非常四四方方的布局和一些非常丑陋的代码。祝你好运。

@Robart。惊人的。感谢所有的帮助和信息。关于 css 和 HTML，我还有很多东西要学，但我很高兴能开始学习。

【参考方案2】：

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

我简单地解决了：

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

并在设计视图中添加margin-top，IDE 添加：

.style3

    margin-top: 6px;