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

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

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

Значок 22 x 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;
}

Ответ 1

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

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

Ответ 2

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

Ответ 3

Для этого вы также можете использовать таблицы, например:

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

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

ОБНОВЛЕНИЕ: Вы также можете использовать flex для этого:

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

Вот пример: https://jsfiddle.net/ctqk0xq1/1/

Ответ 4

Я думаю, что более чистый подход - наследовать вертикальное выравнивание:

В html:

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

И в css:

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

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

Ответ 5

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

.pdf{ line-height:1.5em; }

Ответ 6

Использование флексбоксов помогло мне:

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

Ответ 7

Я просто нашел довольно опрятное решение, я думаю. Хитрость заключается в установке 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;
}

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

Ответ 8

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

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

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

Ответ 9

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

top: calc (50% - 30px);

Ответ 10

Вот что сработало для меня:

.pdf::before {
    content: url('path/to/image.png');
    display: flex;
    align-items: center;
    justify-content: center;
    height: inherit;
}