Vertical Alinear texto en una etiqueta

Se me ha pedido que alinee verticalmente el texto en las etiquetas de los campos en un formulario, pero no entiendo por qué no se están moviendo. He intentado poner estilos en línea usando vertical-align:top; y otros atributos como bottom y middle pero no funciona.Vertical Alinear texto en una etiqueta

¿Alguna idea?

<dd> 
    <label class="<?=$email_confirm_class;?>" 
      style="text-align:right; padding-right:3px">Confirm Email</label> 
    <input class="text" type="text" 
      style="border:none;" name="email_confirm" 
      id="email_confirm" size="18" value="<?=$_POST['email_confirm'];?>" 
      tabindex="4" /> 
    * 
</dd>

Fuente

2009-10-12 Ian

Para hacer esto, debe modificar la propiedad de alineación vertical de la entrada.

<dd><label class="<?=$email_confirm_class;?>" style="text-align:right; padding-right:3px">Confirm Email</label><input class="text" type="text" style="vertical-align: middle; border:none;" name="email_confirm" id="email_confirm" size="18" value="<?=$_POST['email_confirm'];?>" tabindex="4" /> *</dd>

Aquí hay una versión más completa. Ha sido probado en IE 8 y funciona. ver la diferencia mediante la eliminación de la vertical-align: medio de la entrada:

<html><head></head><body><dl><dt>test</dt><dd><label class="test" style="text-align:right; padding-right:3px">Confirm Email</label><input class="text" type="text" style="vertical-align: middle; font-size: 22px" name="email_confirm" id="email_confirm" size="28" value="test" tabindex="4" /> *</dd></dl></body></html>

Fuente

2009-10-12 14:39:56

En mi experiencia, los campos de texto son bastante difíciles de domesticar, y el relleno vertical funciona de manera más confiable. – Wabbitseason

'vertical-align' no hace nada aquí (IE 8). – Joey

Lo probé en IE8 y FF (ubuntu) eliminó la alineación vertical para ver el efecto y está funcionando perfectamente. Actualicé el ejemplo también. –

¿Ha intentado line-height? No resolverá sus problemas si hay varias etiquetas de fila, pero puede ser una solución rápida.

Fuente

2009-10-12 14:40:36 Wabbitseason

Gracias! Funcionó en mi caso ... – jpsstavares

Guardado un montón de tiempo :) –

Esto es lo que suele hacer al texto "Alineación vertical" dentro de las etiquetas:

label { 
    display: block; 
    float: left; 
    padding-top: 2px; /*This needs to be modified to fit */ 
}

No se escala muy bien, pero funciona.

Fuente

2009-10-12 14:48:23 peirix

El estilo vertical-align se utiliza en celdas de tabla, por lo que no hará nada por usted aquí.

Para alinear las etiquetas para las cajas de entrada, puede utilizar line-height:

line-height: 25px;

Fuente

2009-10-12 14:50:20 Guffa

No funciona para alturas variables. – Rodrigo

La alineación vertical sólo funciona con línea o inline-block elementos, y es sólo en relación con otros en línea [- bloque] elementos. Como hace flotar la etiqueta, se convierte en un elemento del bloque.

La solución más simple en su caso es establecer la etiqueta en display: inline-block y agregar vertical-align: middle a las etiquetas y las entradas. (Puede encontrar que la altura del texto es tal que la alineación vertical no hará ninguna diferencia de todos modos.)

Fuente

2009-10-12 15:40:53 DisgruntledGoat

Me encontré con esto tratando de agregar etiquetas o algunas cajas de radio verticales. Tuve que hacer esto:

<%: Html.RadioButton("RadioGroup1", "Yes") %><label style="display:inline-block;padding-top:2px;">Yes</label><br /> 
<%: Html.RadioButton("RadioGroup1", "No") %><label style="display:inline-block;padding-top:3px;">No</label><br /> 
<%: Html.RadioButton("RadioGroup1", "Maybe") %><label style="display:inline-block;padding-top:4px;">Maybe</label><br />

Esto les pone para mostrar correctamente, donde la etiqueta se centra en el botón de radio, aunque tuve que incrementar el relleno superior con cada línea, como se puede ver. El código no es bonito, pero el resultado es.

Fuente

2009-12-16 02:57:06

que tenía un problema similar y lo resolvió envolviendo el label en un div y el establecimiento de los siguientes estilos:

<div style="display: table; vertical-align: middle"> 
    <label style="display: table-cell;" ... > ... </label> 
</div>

Fuente

2013-03-26 11:59:48 Pablo

label { 
 
     padding: 10px 0; 
 
     position: relative; 
 
    }

añadir un poco de padding-top y padding-bottom vez de altura

Fuente

2017-03-19 19:57:54

¿Quizás deletree cómo debería verse el atributo de estilo? Tal vez OP no sabe a qué te refieres. – einpoklum

Use css en su etiqueta.

Por ejemplo:

label {line-height:1em; margin:2px 5px 3px 5px; padding:2px 5px 3px 5px;}

en cuenta que la línea de altura se ajustará la altura de la línea en sí, mientras que el margen dictará lo lejos que otros elementos estarán fuera de la lable y el relleno dictará ningún espacio interior desde el borde exterior de la etiqueta. El margen y el relleno trabajo como este (hacia la derecha: Arriba a la derecha inferior izquierda), por lo 2px 5px 3px 5px es:

2px Top 5px derecho 3px inferior 5px izquierda

Fuente

2017-04-21 16:44:28 psiclone

-1

Adición disply:flex propiedad a la etiqueta recibirá el trabajo hecho!

Fuente

2017-09-02 16:31:20

Vertical Alinear texto en una etiqueta

Respuesta

Cuestiones relacionadas