Alinear verticalmente CSS: antes y después del contenido

Question

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

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

El icono es de 22 x 22 píxeles

.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

respondido a mi propia pregunta después de leer su consejo sobre el atributo CSS vertical-align. ¡Gracias por el consejo!

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

Answer 2

No soy experto en CSS, pero lo que sucede si se pone vertical-align: middle; en su directiva .pdf:before?

Answer 3

Jugar con el atributo de altura de línea debería ser 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

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

texto

El uso de CSS:

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

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

que probablemente también trabajar sin el lapso.

Answer 5

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 manera el icono alinear correctamente en cualquier combinación de resolución/tamaño de letra. Ideal para utilizar con fuentes de iconos.

Answer 6

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 navegadores no compatibles: después, debido al exceso de espacio en el < a/>.

Answer 7

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

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

He aquí un ejemplo: https://jsfiddle.net/ar9fadd0/2/

EDIT: También puede utilizar 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:

arriba: calc (50% - 30px);