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

Question

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

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

Значок размером 22 x 22 пикс.

.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

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

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

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

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

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

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

Answer 4

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

В html:

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

и в css:

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

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

Answer 5

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

.pdf{ line-height:1.5em; }

Answer 6

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

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

Answer 7

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

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

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

.

Answer 8

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

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

top: calc (50% - 30px);