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

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

<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;
}

8 ответов


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

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

Я не эксперт по CSS, но что произойдет, если вы положите vertical-align: middle; в своем


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

.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/


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

в html:

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

и в css:

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

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


возиться с атрибутом высоты линии должно сделать трюк. Я не тестировал это, поэтому точное значение может быть неправильным, но начните с 1.5 em и настройте его с шагом 0.1, пока он не выровняется.

.pdf{ line-height:1.5em; }

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

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

казалось, что в этом случае изображение после автоматически центрируется, по крайней мере, в Firefox/Chrome. Такое может быть немного небрежнее для браузеров, а не поддержка: после, из-за избыточного расстояния на .


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

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


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

верх: в Calc(50% - 30 пикселей);