Вертикальное выравнивание CSS: до и: после содержимого

Question

Я пытаюсь центрировать ссылку с изображением, но никак не могу перемещать содержимое по вертикали.

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

Значок 22 х 22px

.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

Ответил на мой вопрос после прочтения вашего совета по атрибуту CSS с вертикальным выравниванием. Спасибо за совет!

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

Answer 2

Я не эксперт CSS, но что произойдет, если вы поставите vertical-align: middle; в вашу .pdf:before директиву?

Answer 3

Прослушивание атрибута line-height должно делать трюк. Я не тестировал это, поэтому точное значение может быть неправильным, но начинаем с 1.5em и настраиваем его с шагом 0,1, пока оно не выровняется.

.pdf{ line-height:1.5em; } 

Answer 4

Я просто нашел довольно аккуратное решение, я думаю. Фокус в том, чтобы установить line-height изображения (или любого контента) height.

текст

Использование CSS:

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

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

Это, вероятно, также работать без пролете.

Answer 5

Я думаю, уборщик подход к наследованию вертикального выравнивания:

В HTML:

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

И в CSS:

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

Таким образом, значок будет выравнивать должным образом в любой разрешение/размер шрифта. Отлично подходит для использования с иконками шрифтов.

Answer 6

Я потратил много времени на то, чтобы решить эту проблему сегодня, и не мог заставить работу работать с использованием линейной или вертикальной выровненности. Самое легкое решение, которое я смог найти, заключалось в том, чтобы установить < a/> относительно относительно, чтобы он содержал абсолюты, а также: после того, как он был полностью установлен, чтобы вывести его из потока.

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

После этого изображение автоматически центрировалось в этом случае, по крайней мере, под Firefox/Chrome. Это может быть немного sloppier для браузеров, не поддерживающих: после этого из-за избыточного интервала на < a/>.

Answer 7

Вы также можете использовать таблицы для достижения этой цели, как:

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

Вот пример: https://jsfiddle.net/ar9fadd0/2/

EDIT: Вы также можете использовать гибкий для достижения этой цели:

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

Ниже приведен пример: https://jsfiddle.net/ctqk0xq1/1/

Answer 8

У меня была аналогичная проблема. Вот что я сделал. Поскольку элемент I пытался центрировать вертикально, высота = 60 пикселей, мне удалось центрировать его по вертикали, используя:

верх: calc (50% - 30px);