Alineación vertical al medio en una etiqueta de anclaje de bloque en línea

Question

Necesito que mis enlaces y botones se vean iguales, pero no he podido alinear verticalmente el texto dentro de una etiqueta "a" de la misma manera que etiqueta de "botón". Es importante tener en cuenta que las etiquetas deben poder manejar múltiples líneas de texto (para que la altura de línea no funcione).

a,button { 
    display: inline-block; 
    -moz-box-sizing: border-box; 
    width: 150px; 
    height: 150px; 
    vertical-align: middle; 
    border: 1px solid #000; 
    text-align: center; 
} 

Ver la jsFiddle a continuación:

http://jsfiddle.net/bZsaw/3/

Como se puede ver, puedo conseguir que funcione con una combinación de una etiqueta span en el interior y el establecimiento de "display: table" a la "a" y establecer "display: table-cell" y "vertical-align: middle" en el span, pero eso no funciona en IE7.

a,button { 
    width: 150px; 
    height: 150px; 
    border: 1px solid #000; 
    text-align: center; 
} 

a { 
    display: table; 
    -moz-box-sizing: border-box; 
} 

a span, button span { 
    vertical-align: middle; 
    text-align: center; 
} 

a span { 
    display: table-cell; 
} 

En busca de una solución simple de CSS solamente.

Answer 1

La única manera confiable de lo que he encontrado texto align recta para que el envoltorio del texto si se pone demasiado larga es con un enfoque de 2 contenedor.

El contenedor externo debe tener una altura de línea de al menos el doble que la especificada para el contenedor interno. En su caso, eso significa lo siguiente:

a { 
    width: 150px; 
    height: 150px; 
    border: 1px solid #000; 
    text-align: center; 
    line-height: 150px; 
    display: block; 
} 

a span { 
    display:inline; 
    display:inline-table; 
    display:inline-block; 
    vertical-align:middle; 
    line-height: 20px; 
    *margin-top: expression(this.offsetHeight < this.parentNode.offsetHeight ? parseInt((this.parentNode.offsetHeight - this.offsetHeight)/2) + "px" : "0"); 
} 

Añadir flotante a la izquierda en la etiqueta si se quiere que todo en línea. Aquí está el ejemplo actualizado con texto largo en la etiqueta A también ... http://jsfiddle.net/bZsaw/13/

Puede establecer la altura de la línea en el tramo a lo que desee y si es menor que la mitad de la altura de línea del elemento primario, lo hará center Y permite el ajuste del texto si el texto excede el ancho del contenedor principal. Esto funciona en todos los navegadores modernos, hasta donde yo sé.

Answer 2

Si su texto no será más grande que el ancho de la caja, puede establecer la altura de la línea igual a la altura del cuadro.

line-height:150px;

Answer 3

Usoline-height:150px; y display-inline:block;