垂直对齐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;
}


分享 收藏 举报
Nekomusume

2个回答

Nekomusume

在我阅读了关于vertical-align这个CSS属性的建议后。

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


发布于 2024-08-23 11:21:28
举报
Ricciflows

我不是CSS方面的专家，但如果你将vertical-align: middle; 放到你的 .pdf:before 指令里会怎么样?

发布于 2024-08-23 11:24:09
举报