superior Alineación vertical en CSS

Aquí está mi códigosuperior Alineación vertical en CSS

<div style="margin:0;padding:0;vertical-align:text-top; border:1px solid red;float:right;"> 
    <span>Key:</span> 
    <asp:TextBox ID="tbKey" MaxLength="16" runat="server" ></asp:TextBox> 
    <asp:ImageButton ID="btnRefresh" runat="server" imageUrl="_img/btn_submit.gif" Height="22" Width="52" /> 
</div>

Me gustaría que todos los tres elementos que simplemente alinee en la parte superior. ¿Es esto factible?

Editado: El código fuente (traducido) es

<div style="margin:0;padding:0;vertical-align:text-top; border:1px solid red;float:right;"> 
       <span>Key:</span> 
       <input name="tbKey" type="text" maxlength="16" id="tbKey" /> 

       <input type="image" name="btnRefresh" id="btnRefresh" src="_img/btn_submit.gif" style="height:22px;width:52px;border-width:0px;border-width:1px;" /> 

      </div>

Fuente

2011-02-22 sarsnake

eso es su código .NET. Muéstranos el HTML/CSS renderizado. –

acaba de editar la cuestión, véase más arriba – sarsnake

trate de darle el atributo vertical-align: text-top a su botón. En CSS:

#btnRefresh 
{ 
    vertical-align: text-top; 
}

O añadir VerticalAlign="Top" a su mando a ImageButton (no sé cómo este último se traduce en CSS).

Fuente

2011-02-22 21:06:50 zdyn

no funciona. Añadiendo vertical-align: text-top; al botón simplemente empuja los otros 2 elementos hacia arriba. Y cuando se quita, el botón está arriba, por lo que es el viceversa de lo que cabría esperar. Estoy seguro de que los ninjas de CSS explicarán por qué :) – sarsnake

@gnomixa, lo siento, debo haberte entendido mal. Mi error. – zdyn

¿Usted intentó vertical-align: top; (por elemento en línea solamente) Esto no funciona con el elemento de bloque como div. Por lo tanto, la solución se establece un ancho fijo para el elemento div y display: inline; También necesita un valor de altura.

Fuente

2011-09-07 21:44:03 lnguyen55

Pruebe el estilo de su css de esta manera:

div{ 
    display: table-cell; 
    vertical-align: top; 
}

Fuente

2012-07-10 16:50:01

normalmente utilizo

display: inline-block;

en esta situación. Eso debería hacer que el diseño respete

vertical-align: top;

reglas.

Esto es similar a la solución table-cell de @Jason Ellis, pero más semántica ya que esta no es una tabla.

Fuente

2012-07-10 16:53:33 harpo

superior Alineación vertical en CSS

Respuesta

Cuestiones relacionadas