Jak wyrównać obiekty w pionie w ASP.NET?

Od jakiegoś czasu kręcę się z asp.net przez jakiś czas i zawsze mam problemy z wyrównywaniem obiektów o różnych wysokościach w tym samym wierszu. Na przykład w tym przypadku mam etykietę wyszukiwania, pole tekstowe, a następnie przycisk obrazu. Jaki jest "właściwy sposób", aby odpowiednio dopasować te trzy elementy?Jak wyrównać obiekty w pionie w ASP.NET?

Moje istniejący kod:

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

Źródło

2011-11-30 PFranchise

ASP i ASP.NET nie to samo. Powinieneś mieć zwyczaj używania dwóch terminów poprawnie lub możesz nie otrzymać odpowiedzi, której oczekujesz. –

To pytanie ma niewiele wspólnego z ASP.NET. To prawie pytanie HTML. Dowiedz się, jak to zrobić za pomocą zwykłego kodu HTML, a otrzymasz odpowiedź. –

@ Przepraszam. Będę o tym pamiętać, publikując w przyszłości. Dziękuję za poprawienie tego problemu dla mnie tym razem. – PFranchise

Najłatwiej jest za pomocą CSS lub tabel. Położyłem element div z wysokością i pionowe wyrównanie do góry. 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>

Źródło

2011-11-30 00:55:53 Robert

Bardzo doceniam odpowiedź. Jednak wszystkie te trzy elementy wciąż są wyrównane w oparciu o ich pionowe dno. Czy istnieje sposób wyrównania środka trzech obiektów? Przepraszam, jeśli to pragnienie nie było jednoznaczne w moim pytaniu. – PFranchise

Zmodyfikowałem kod, aby to odzwierciedlić: Musisz umieścić każdy z nich we własnej etykiecie div i dopasować górną krawędź, aby dopasować je do siebie. Jedynym problemem jest to, że przeglądarka może nie wszystkie idealnie pasują, powinny być bardzo blisko, ale nie dokładnie takie same w każdej przeglądarce. – Robert

W porządku. Dziękuję Ci bardzo. Czy tak większość witryn radzi sobie z tego typu rzeczami? Czuję, że chęć wyrównania takich obiektów byłaby powszechną obawą. – PFranchise

miałem ten sam problem i myślę, że za pomocą tabeli lub div align tylko do pola tekstowego to jest nadmierne.

I rozwiązać prościej:

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

i dodanie margin-top w widoku projektu, IDE dodania:

.style3 
{ 
    margin-top: 6px; 
}

Źródło

2013-05-14 11:28:07

Jak wyrównać obiekty w pionie w ASP.NET?

Odpowiedz

Powiązane problemy