html vertical alinear el texto dentro de la entrada de tipo botón

Estoy tratando de crear un botón con la altura de ’22px’ , y que el texto dentro del botón será alineado verticalmente en el centro del botón. He probado de todo , y no puede encontrar la manera de hacerlo.

cómo puede hacerse esto?

ACTUALIZACIÓN:
este es mi código:

CSS:

.test1 label {
    float: left;
    clear: left;
    width:31%;
    margin-right:-2px;
}
.test1 input {
    float:left;
    width:69%;
    margin-right:-2px;
}
.testbutton {
    float:left;
    margin-left: 10px;
    height: 22px;
    line-height: 22px;
    text-align:center;
    background-color:#fbfbfb;
    border:1px solid #b7b7b7;
    color:#606060;
    cursor:pointer;
    display:inline-block;
    font:bold 12px/100% Arial, sans-serif;
}

HTML:

<div class="test1">
<label for="test" title="test">test</label>                                
<input style="width:18px; float:left;" type="checkbox" name="test" id="test" tabindex="5" />
<input class="testbutton" id="testbutton" style="width:60px;"type="button" value="Import" /></div>
InformationsquelleAutor user590586 | 2011-03-03

9 Kommentare

  1. 39

    Trate de añadir la propiedad line-height: 22px; para el código.

    • He añadido «línea-altura» de la propiedad , y aún así no funciona.. he actualizado mi pregunta con mi código.. gracias!
    • Hola! Has probado el código y el texto «importar» en el botón alinear correctamente, yo no entienda lo que es worng. He intente esto en Firefox y chrome.
    • Yo estoy usando es decir, yo no ver en Firefox o chrome, he cambiado la entrada de los botones en su lugar y ahora funciona.. gracias por su ayuda!
    • experimentando con línea-altura parecía funcionar para mí también, eventualmente…gracias!
    • Ser cuidadosos con esto. Si el texto siempre debe envolver, que se romperá el diseño. Recomiendo peterhry la respuesta a continuación. El cambio a un botón de la etiqueta va a centrar automáticamente el contenido verticalmente, y se ajustará el contenido muy bien, si es necesario.
    • Esto funcionó para mí en una <botón> pero no en un <input>

  2. 25

    Puede utilizar flexbox (marque compatibilidad del navegador, dependiendo de sus necesidades).

    .testbutton {
      display: inline-flex;
      align-items: center; 
    }
    • Limpio y sencillo.
    • La mejor solución que he visto hasta ahora. También funciona bien con diferente altura de los botones. (Por ejemplo, los botones con un borde)
    • También el centro de él horizontalmente, agregar «justify-content: espacio circundante;»
    • Volviendo a mi comentario anterior, esto no parece ser una solución adecuada porque button elemento no puede tener display: flex;. Echa un vistazo a esta pregunta para más info: stackoverflow.com/questions/35464067/…
  3. 13

    Utilizar el <button> etiqueta en su lugar. <button> etiquetas son centrada verticalmente por defecto.

    • No es cierto.
    • Sí, el contenido dentro de un botón de etiqueta se centra por defecto en todos los navegadores. Aquí está una demostración: codepen.io/peterhry/pen/arDAF
    • Para el registro, este fue un útil hack antes de flexbox fue ampliamente apoyado, pero no hay ninguna buena razón para usarlo el día de hoy.
  4. 4

    Me he dado por vencida tratando de alinear el texto en los botones! Ahora, si me necesitan, estoy usando <a> etiquetas, así:

    <a href="javascript:void();" style="display:block;font-size:1em;padding:5px;cursor:default;" onclick="document.getElementById('form').submit();">Submit</a>

    Por lo tanto, si el documento tiene el tamaño de fuente es 12 px, mi «botón» se han 22px altura. Y el texto será alinear verticalmente. Que, en teoría, ya que, en algunos casses, una desigual relleno de «6px 5px 4px 5px» hará el trabajo hecho.

    Aunque, es un hack, esta técnica es bastante buena para la solución de los problemas de compatibilidad en los navegadores más antiguos, como IE6!

  5. 1

    Si el botón no estaban flotando, usted podría utilizar vertical-align:middle; para centrar el texto en su interior. Después de mucha experimentación, este fue el sólo solución que pude encontrar que funcionaba en IE sin cambiar de marcado. (en Chrome, el texto de los botones parece estar centrada automáticamente sin este hack).

    Pero la utilización de un float:left que obliga a que el elemento a ser un elemento de bloque (su display:inline-block se omite), la cual a su vez impide la vertical-align de trabajo porque vertical-align no funciona dentro de un elemento de bloque.

    Así que usted tiene tres opciones:

    • deje de usar flotadores en este formulario, y el uso inline y inline-block elementos para simular flotante.
    • como @stefan notas anteriores, el uso de otro elemento como un <a> y el uso de javascript para enviar el formulario.
    • aceptar que en IE sus botones se apagará 1px verticalmente.
  6. 1

    La solución más sencilla sería, simplemente, el uso de un real button elemento, que centra su contenido verticalmente sin ningún tipo especial de CSS en la mayoría o en todos los navegadores, y que puede ser de estilo como de costumbre.

  7. 0

    La cosa más simple que puedes hacer es usar reset.css. Se normaliza la hoja de estilos predeterminada a través de navegadores, y casualmente permite botón { vertical-align: middle; } a funcionar bien. Darle un tiro – yo lo uso en casi todos mis proyectos solo para matar a los pequeños errores como este.

    https://gist.github.com/nathansmith/288292

  8. 0

    Yo tenía un botón en donde el background-image había una sombra por debajo de ella para que la alineación del texto estaba fuera de la parte superior. El cambio de la line-height no sería de ayuda. He añadido padding-bottom y funcionó.

    Así que lo que tienes que hacer es determinar el line-height con los que desea jugar. Así, por ejemplo, si tengo un botón que la altura es verdaderamente 90px pero yo quiero la línea-altura del 80px me gustaría tener algo como esto:

    input[type=butotn].mybutton{
        background: url(my/image.png) no-repeat center top; /*Image is 90px x 150px*/
        width: 150px;
        height: 80px; /*shadow at the bottom is 10px (90px-10px)*/
        padding-bottom: 10px; /*the padding will make up for the lost height while maintaining the line-height to the proper height */
    
    }

    Espero que esto ayude.

    • Lo siento, la confusión de voto por azar clic!
    • Sucede, no se preocupe.

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea