¿Cómo alinear objetos verticalmente en ASP.NET?

He estado jugando con asp.net por un tiempo y siempre tengo problemas para alinear objetos con varias alturas en la misma fila. Por ejemplo, en este caso, tengo una etiqueta de búsqueda, un campo de texto, luego un botón de imagen. ¿Cuál es la "forma correcta" de alinear estos tres elementos correctamente?¿Cómo alinear objetos verticalmente en ASP.NET?

Mi código existente:

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

Fuente

2011-11-30 PFranchise

ASP y ASP.NET no son la misma cosa. Debe adquirir el hábito de usar los dos términos correctamente o puede que no obtenga la respuesta que espera. –

Esta pregunta tiene muy poco que ver con ASP.NET. Es más o menos una pregunta HTML. Averigua cómo hacerlo con HTML simple, y tendrás tu respuesta. –

@Abe Lo siento. Lo tendré en cuenta cuando publique en el futuro. Gracias por corregir el problema para mí esta vez. – PFranchise

La más fácil es usar CSS o tablas. Coloco un div alrededor con una altura y un alineamiento vertical en la parte superior. 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>

Fuente

2011-11-30 00:55:53 Robert

Agradezco enormemente la respuesta. Sin embargo, los tres elementos siguen alineándose en función de su fondo vertical. ¿Hay alguna manera de alinear el medio de los tres objetos? Me disculpo si este deseo no estaba claro en mi pregunta – PFranchise

He modificado el código para reflejar esto: Tendría que poner cada uno en su propia etiqueta div y ajustar el relleno para hacer que se alineen. El único problema con esto es el navegador cruzado, es posible que no todos se alineen perfectamente, deben estar muy cerca pero no exactamente iguales en cada navegador. – Robert

De acuerdo. Muchas gracias. ¿Es así como la mayoría de los sitios manejan este tipo de cosas? Siento que querer alinear esos objetos sería una preocupación común. – PFranchise

tuve el mismo problema y creo que el uso de una mesa o un div sólo para alinear el cuadro de texto es excesiva.

que resolver simplemente:

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

y añadiendo el margin-top en la vista Diseño, el IDE ha añadido:

.style3 
{ 
    margin-top: 6px; 
}

Fuente

2013-05-14 11:28:07

¿Cómo alinear objetos verticalmente en ASP.NET?

Respuesta

Cuestiones relacionadas