如何在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中垂直對齊對象？

回答

相關問題