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