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

我一直在搞乱asp.net一段时间，并且总是有问题在同一行上对齐各种高度的对象。例如，在这种情况下，我有一个搜索标签，一个文本字段，然后是一个图像按钮。让这三个项目正确对齐的“正确方法”是什么？如何在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>

来源

2011-11-30 PFranchise

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

这个问题与ASP.NET很少有关。这几乎是一个HTML问题。弄清楚如何用纯HTML完成，并且你会得到你的答案。 –

@Abe对不起。将来发布时，我会牢记这一点。感谢这次纠正我的问题。 – PFranchise

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

来源

2011-11-30 00:55:53 Robert

我非常感谢回应。但是，所有三个项目仍然基于垂直底部对齐。有没有办法让三个对象的中间对齐？我很抱歉，如果这个愿望不明确在我的问题 – PFranchise

我修改了代码，以反映这一点：你需要把每个人在他们自己的div标签，并调整填充顶部，使他们排队。唯一的问题是跨浏览器，他们可能并不是完全排队，他们应该非常接近，但在每个浏览器上都不完全一样。 – Robert

好的。非常感谢你。大多数网站是如何处理这种事情的？我觉得想要对齐这些对象将是一个普遍的问题。 – PFranchise

我有同样的问题，我觉得用一个表或一个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; 
}

来源

2013-05-14 11:28:07

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

回答

相关问题