html - imagen - centrar texto horizontalmente y vertical css

Centrar verticalmente el texto dentro de un bloque en línea

Question

Estoy tratando de crear algunos botones para un sitio web usando hipervínculos con estilo. Me las arreglé para conseguir que el botón se vea como quiero, salvo un pequeño problema. No puedo obtener el texto (''Enlace'' en el código fuente a continuación) para centrarlo verticalmente.

Desafortunadamente, puede haber más de una línea de texto como se muestra con el segundo botón, así que no puedo usar line-height para centrarla verticalmente.

Mi solución inicial fue usar display: table-cell; en lugar de inline-block , y eso soluciona el problema en Chrome, Firefox y Safari, pero no en Internet Explorer, así que creo que necesito atenerme al bloque en línea.

¿Cómo podría 57px verticalmente el texto del enlace dentro del 57px inline-block 57px x 57px , y tenerlo en cuenta para varias líneas de texto? Gracias por adelantado.

CSS:

.button {
    background-image:url(/images/categorybutton-off.gif);
    color:#000;
    display:inline-block;
    height:57px;
    width:100px;
    font-family:Verdana, Geneva, sans-serif;
    font-size:10px;
    font-weight:bold;
    text-align:center;
    text-decoration:none;
    vertical-align:middle;
}
.button:hover {
    background-image:url(/images/categorybutton-on.gif);
}
.button:before {
    content:"Click Here For/A";
    font-style:italic;
    font-weight:normal !important;
    white-space:pre;
}

HTML:

<a href="/" class="button">Link</a>
<a href="/" class="button">Link<br />More Details</a>

Answer 1

Envuelva su texto con un intervalo (Centrado) y escriba otro intervalo vacío justo antes (Centrado) de esta manera.

HTML:

<a href="..." class="button">
  <span class="Centerer"></span>
  <span class=''Centered''>Link</span>
</a>

CSS

.Centered
{
    vertical-align: middle;
    display: inline-block;
}

.Centerer
{
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

Eche un vistazo aquí: http://jsfiddle.net/xVnQ6/

Answer 2

Muchas gracias @avrahamcool, funciona como un encanto!

Tengo un poco de actualización. Puede reemplazar el .Centerer span redundante con css

.button:before {
  content: '''';
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

Vea la demostración aquí: http://jsfiddle.net/modernweb/bXD2V/

NOTA: Esto no funcionará con el texto en el atributo "contenido".