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

Question

Вертикальное выравнивание на 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;

}

638 8

css css-content

8 ответов:

Comments

Ничего не найдено.

theorise · Accepted Answer · 2013-11-05 15:10:00

ответил на мой собственный вопрос, прочитав Ваши советы по атрибуту CSS вертикального выравнивания. Спасибо за подсказку!
.pdf:before {
    padding: 0 5px 0 0;
    content: url(../img/icon/pdf_small.png);
    vertical-align: -50%;
}

Chowlett · Accepted Answer · 2010-05-14 12:30:02

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

fassl · Accepted Answer · 2016-07-04 02:36:09

вы также можете использовать таблицы для достижения этой цели, например:
.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/

Sander van den Akker · Accepted Answer · 2013-04-02 11:38:00

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

в html:
<div class="shortcut"><a href="#">Download</a></div>
и в css:
.shortcut {
    vertical-align: middle;
}
.shortcut > a:after {
    vertical-align: inherit;
{
таким образом, значок будет правильно выровнен в любой комбинации разрешения/размера шрифта. Отлично подходит для использования со значками шрифтов.

Mathew · Accepted Answer · 2010-05-14 12:35:02

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

Kenneth M. Kolano · Accepted Answer · 2013-11-22 11:53:20

Я потратил много времени, пытаясь разобраться в этом сегодня, и не мог заставить вещи работать с помощью line-height или vertical-align. Самое простое решение, которое я смог найти, состояло в том, чтобы установить относительно позиционированным, чтобы он содержал абсолюты, и :после того, как он будет позиционирован абсолютно, вынимая его из потока.
a{
    position:relative;
    padding-right:18px;
}
a:after{
    position:absolute;
    content:url(image.png);
}
после того, как изображение, казалось, автоматически центрируется в этом случае, по крайней мере, в Firefox/Chrome. Такое может быть немного небрежнее для браузеров нет поддержка: после, из-за избыточного расстояния на .

JoomFever · Accepted Answer · 2012-10-11 07:10:44

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

user2606576 · Accepted Answer · 2017-08-02 14:00:49

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

top: calc (50% - 30px);