lineas - CSS simple: el texto no se centrará en un botón

limitar caracteres css

Question

En Firefox ''A'' se muestra en el medio, en Chrome / IE no:

<button type="button" style="width:24px; text-align:center; vertical-align:middle">A</button>

Tenga en cuenta que lo siguiente tiene los mismos resultados:

<button type="button" style="width:24px;">A</button>

Edit: ahora parece estar arreglado en Chrome 5.0

Answer 1

Como método de fuerza más bruta que encontré funcionó para mí:

Primero, ajuste el texto dentro del botón en un espacio, y luego aplique este css a ese espacio

var spanStyle = {
      position: "absolute",
      top: "50%",
      left: "50%",
      transform: "translate(-50%, -50%)"
    }

* configuración anterior para el estilo en línea

Answer 2

El problema es que los botones se representan de manera diferente en los navegadores. En Firefox, 24px es suficiente para cubrir el relleno predeterminado y el espacio permitido para tu carácter "A" y centrarlo. En IE y Chrome, no lo hace, por lo que toma por defecto el valor mínimo necesario para cubrir el relleno izquierdo y el texto sin cortarlo, pero sin agregar ningún ancho adicional al botón.

Puede aumentar el ancho o, como se sugirió anteriormente, alterar el relleno. Si quitas el ancho explícito, debería funcionar también.

Answer 3

Probando esto en Chrome, necesitas agregar

padding: 0px;

A la CSS.

Answer 4

Qué pasa:

<input type="button" style="width:24px;" value="A"/>

Answer 5

Usualmente, tu código debería funcionar ...

Pero aquí hay una manera de centrar el texto en css:

.text
{
    margin-left: auto;
    margin-right: auto;
}

Esto me ha demostrado ser a prueba de balas cuando quiero centrar el texto con css.