texto - Alinear verticalmente CSS: antes y después del contenido

centrar texto vertical y horizontal css

Question

Estoy intentando centrar el enlace con la imagen, pero no puedo mover el contenido verticalmente de ninguna manera.

<h4>More Information</h4>
<a href="#" class="pdf">File Name</a>

El icono es 22 x 22 px

.pdf {
    font-size: 12px;
}
.pdf:before {
    padding:0 5px 0 0;
    content: url(../img/icon/pdf_small.png);
}
.pdf:after {
    content: " ( .pdf )";
    font-size: 10px;
}
.pdf:hover:after {
    color: #000;
}

Answer 1

Acabo de encontrar una solución bastante ordenada, creo. El truco consiste en establecer la line-height de la line-height de la imagen (o cualquier contenido).

texto

Usando CSS:

div{
  line-height: 26px; /* height of the image in #submit span:after */
}

span:after{
    content: url(''images/forward.png'');
    vertical-align: bottom;
}

Eso probablemente también funcionaría sin el lapso.

Answer 2

Creo que un enfoque más limpio es heredar la alineación vertical:

En html:

<div class="shortcut"><a href="#">Download</a></div>

Y en css:

.shortcut {
    vertical-align: middle;
}
.shortcut > a:after {
    vertical-align: inherit;
{

De esta forma, el icono se alineará correctamente en cualquier combinación de resolución / tamaño de fuente. Ideal para utilizar con fuentes de iconos.

Answer 3

Juguetear con el atributo de altura de línea debería hacer el truco. No he probado esto, por lo que el valor exacto puede no ser el correcto, pero empiece con 1.5em y modifíquelo en incrementos de 0.1 hasta que se alinee.

.pdf{ line-height:1.5em; }

Answer 4

No soy experto en CSS, pero ¿qué ocurre si pones vertical-align: middle; en su .pdf:before directiva?

Answer 5

Pasé una buena cantidad de tiempo tratando de resolver esto hoy, y no pude hacer que las cosas funcionen usando line-height o vertical-align. La solución más fácil que pude encontrar fue establecer el <a/> para estar relativamente posicionado, por lo que contendría absolutos, y el: después de ser posicionado absolutamente sacándolo del flujo.

a{
    position:relative;
    padding-right:18px;
}
a:after{
    position:absolute;
    content:url(image.png);
}

La imagen posterior pareció centrarse automáticamente en ese caso, al menos en Firefox / Chrome. Tal vez sea un poco más descuidado para los navegadores que no admiten: después, debido al exceso de espacio en el <a/>.

Answer 6

Respondí mi propia pregunta después de leer su consejo sobre el atributo vertical de alineación de CSS. ¡Gracias por el consejo!

.pdf:before {
    padding: 0 5px 0 0;
    content: url(../img/icon/pdf_small.png);
    vertical-align: -50%;
}

Answer 7

También puede usar tablas para lograr esto, como:

.pdf {
  display: table;
}
.pdf:before {
  display: table-cell;
  vertical-align: middle;
}

Aquí hay un ejemplo: https://jsfiddle.net/ar9fadd0/2/

EDITAR: También puede usar flex para lograr esto:

.pdf {
  display: flex;
}
.pdf:before {
  display: flex;
  align-items: center;
}

Aquí hay un ejemplo: https://jsfiddle.net/ctqk0xq1/1/

Answer 8

Tuve un problema similar. Aquí esta lo que hice. Como el elemento que estaba tratando de centrar verticalmente tenía una altura = 60px, logré centrarlo verticalmente usando:

parte superior: calc (50% - 30px);