html - para - input type button css

¿Qué hace que el texto en un elemento<button> se centre verticalmente?

Question

Parece que hay algo de magia alrededor del elemento <button> que no entiendo.

Considere este marcado:

<button class="button">Some Text</button>
<div class="button">Some Text</div>

Y este CSS:

.button{
    background: darkgrey;
    height: 40px;
    border: 2px solid grey;
    width: 100%;
    box-sizing: border-box;
    font-size: 14px;
    font-family: helvetica;
    text-align: center;
    margin-bottom: 20px;

    /*I''m aware I could use this to center it*/
    /*line-height: 40px;*/
}

¿Qué hace que el texto en el elemento del botón centrado verticalmente? Webkit parece predefinir una -webkit-box-align con un valor de center para el elemento <button> . Si configuro eso para initial el texto ya no está alineado con el centro. Pero eso no parece ser la magia completa, ya que, por otro lado, no tuve suerte centrando el texto en el div usando la -webkit-box-align .

Aquí hay un violín: http://jsfiddle.net/cburgdorf/G5Dgz/

Answer 1

Creo que la única razón de este comportamiento es que Google Chrome o los navegadores en general tomarán los estilos predeterminados de su sistema operativo.

Por ejemplo, si compara el botón o la barra de desplazamiento en Google Chrome, ejecute en Windows 7 y Windows 8:

• En Windows 7, el botón tendrá una línea de degradado horizontal en el centro del botón.

• En Windows 8, la barra de desplazamiento puede aparecer y desaparecer al hacer clic

Esta es solo mi opinión, pero espero que te pueda dar algunas ideas :)

Answer 2

En Mozilla Firefox obtuve la -moz-appearance :

-moz-appareance: button;

En el borrador de HTML5, hay una sección de Representación , pero no detalla la ubicación: S

Answer 3

Podría usar relleno.

Por ejemplo

padding: 20px 10px;

Answer 4

Puede usar display:table-cell; vertical-align: middle; display:table-cell; vertical-align: middle; como un método alternativo.

Answer 5

Sé que esto tiene un par de años, pero agregaré mis pensamientos después de algunas investigaciones para emitir al escribir una hoja de estilo de reinicio para un proyecto.

NOTA ** Esto se basa en buscar en la fuente de Firefox porque fue la forma más fácil de obtener y leer. Sin embargo, en función de un comportamiento similar en otros navegadores, la implementación es probablemente similar.

En primer lugar, el problema principal aquí es que los elementos <button> (al menos en Firefox) están construidos con un elemento interno entre la etiqueta <button> y sus elementos secundarios. En Firefox se llama moz-button-content y no es algo que se pueda alcanzar con CSS y se ha configurado para mostrar bloque sin heredar el alto del botón, puede ver esta declaración de estilo en la hoja de estilo de useragent

Como no puede afectar ninguno de los estilos en este elemento, se ve obligado a agregarle estilo en las etiquetas <button> . Esto nos lleva al segundo problema: el navegador está codificado para posicionar verticalmente el contenido del botón .

Teniendo en cuenta estos dos problemas, puede comenzar a ver cómo el botón hace que el contenido se centre, considere:

   <button> tag

+------------------------+ ^
| button extra space     | |
|                        | |
+------------------------+ |
|| ::moz-button-content || | button height
||   display: block;    || |
+------------------------+ |
|                        | |
| button extra space     | |
+------------------------+ v

Si le da al button una altura, como 48px de su violín, el texto se centrará porque el elemento moz-button-content es bloque de visualización y solo tendrá la altura del contenido (probablemente la altura de línea del contenido) de forma predeterminada) y cuando se coloca junto a otro elemento, se obtiene este comportamiento:

* {
  box-sizing: border-box;
  margin: 0;
  border: 0;
  padding: 0;
  font-family: san-serif;
  background: none;
  font-size: 1em;
  line-height:1;
  vertical-align: baseline;
 }

button, a {
  height: 3em;
}

button {
  background: red;
}

a {
  display:inline-block;
  background: green;
 }

<button>Button content</button>
<a>Link Content</a>

Este error y este error en el rastreador de problemas de Firefox estaba a punto de llegar a cualquier error documentado. Pero los hilos dan la impresión de que, a pesar de no aparecer en ninguna especificación real, los navegadores lo han implementado de esta manera "porque los otros navegadores lo están haciendo de esa manera".

Existe una solución al problema si realmente desea cambiar el comportamiento predeterminado, pero no resuelve completamente el problema y YMMV dependiendo de su implementación.

Si inserta un contenedor <span> con display: block como el único elemento secundario del botón y coloca todo su contenido en él, puede usarlo para omitir el elemento moz-button-content .

Tendrá que hacer que este elemento <span> tenga height: inherit para que llene correctamente la altura del botón y luego agregue el estilo de botón normal al <span> , obtendrá básicamente el comportamiento que desea.

    * {
      box-sizing: border-box;
      margin: 0;
      border: 0;
      padding: 0;
      font-family: san-serif;
      background: none;
      font-size: 1em;
      line-height:1;
      vertical-align: baseline;
     }

    button, a {
      height: 3em;
    }

    button {
      background: red;
    }
    button::-moz-focus-inner {
      border: 0;
      padding: 0;
      outline: 0;
    }

    button > span {
      display: block;
      height: inherit;
    }

    a {
      display:inline-block;
      background: green;
    }

    button.styled > span , a.styled{
      padding: 10px;
      background: yellow;
    }

    <button><span>Button content</span></button>
    <a><span>Link Content<span></a><br/>
    <button class="styled"><span>Button content</span></button>
    <a class="styled"><span>Link Content<span></a>

También vale la pena mencionar la appearance regla CSS4 ( aún no disponible ):

Si bien esta no es una opción viable (desde el 5 de enero) aún. Existe una propuesta para redefinir la regla de appearance en el borrador de CSS4 que podría hacer lo correcto y eliminar todas las suposiciones hechas por el navegador. Solo lo menciono como completo porque puede ser útil en el futuro.

ACTUALIZACIÓN - 30/08/2016 En realidad, debería utilizar un <span> lugar de un <div> , ya que los div no son elementos secundarios válidos para los elementos <button> . He actualizado la respuesta para reflejar esto.