Estoy tratando de hacer un link que tiene un height y un width de 200px.
El texto del enlace debe estar centrado vertical y horizontalmente.

Este es mi CSS hasta ahora:

a:link.Kachel {
  width: 200px;
  height: 200px;
  margin: 0 auto;
  display: block;
  text-align: center;
  background: #383838;
  display: -webkit-box;
  display: -moz-box;
  display: box;
  -webkit-box-align: center;
  -moz-box-align: center;
  box-align: center;
}

y este el código HTML:

<tr>
  <td>
    <a class="Kachel" href="#">Test</a>
  </td>
</tr>

El texto está centrado horizontalmente pero no verticalmente.

Alguna idea de cómo conseguir el texto centrado tanto en sentido horizontal y virtically?

InformationsquelleAutor user1567896 | 2013-02-13

6 Comentarios

  1. 59

    quitar todo lo que otra tontería, y basta con sustituir height con line-height

    a:link.Kachel{
       width: 200px;
       line-height: 200px;
       display: block;
       text-align: center;
       background: #383838;
    }

    jsfiddle: http://jsfiddle.net/6jSFY/

    • Muchas gracias. A veces es así de fácil :).
    • ¿qué pasa si el enlace se ha height: 100%?
    • normalmente línea-altura vertical: alinea si su conjunto de 150%, lo que yo usaría si el elemento a la altura se ajusta al 100%
    • Esta solución tiene mucho sentido, pero sólo si el texto del enlace es de una sola línea. Actualmente estoy trabajando para encontrar una manera de vertical-align texto del enlace que va desde 1 a varias líneas.
  2. 17

    En CSS3, usted puede lograr esto con un flexbox sin elementos adicionales.

    .link {
        display: flex;
        justify-content: center;
        align-items: center;
    }
  3. 5

    Si el texto es sólo en una línea, puede utilizar line-height:200px; – donde el 200px es el mismo que el height valor.

    Si el texto en varias líneas, y siempre estarán en el mismo número de líneas múltiples, puede utilizar padding combinado con line-height. Ejemplo con 2 líneas:

    line-height:20px;
    padding-top:80px;

    De esta manera las dos líneas de tomar hasta un total de 40px y el relleno de la parte superior pone perfectamente en el medio. Tenga en cuenta que usted necesita para ajustar el height en consecuencia.

    JSFiddle ejemplo.

    Si hay más de un enlace y va a tener cualquier número de líneas, usted necesitará un poco de JavaScript correspondiente a revisión el relleno en cada uno.

  4. 2

    Pequeño punto de añadir. Si se quita el subrayado (text-decoration: none;) a continuación, el texto no esté perfectamente centrado verticalmente. Enlaces de dejar espacio para el subrayado. A mi conocimiento, no hay forma de anular este, excepto para agregar poco más de margen superior.

  5. 0

    Tal vez mediante el relleno? Como:

    padding-top: 50%;
    • ¿En que es diferente de las otras respuestas aquí?

Dejar respuesta

Please enter your comment!
Please enter your name here