我正努力将链接与图像居中，但似乎无法以任何方式垂直移动内容。
<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;
}2个回答
Nekomusume
This person is lazy, nothing was left behind...
在我阅读了关于vertical-align这个CSS属性的建议后。
.pdf:before {
padding: 0 5px 0 0;
content: url(../img/icon/pdf_small.png);
vertical-align: -50%;
}
Ricciflows
This person is lazy, nothing was left behind...
我不是CSS方面的专家，但如果你将vertical-align: middle; 放到你的 .pdf:before 指令里会怎么样？
Consider using flex: stackoverflow.com/a/22218694/435605 - the answer is for text but works on all elements.
Thanks to CSS3's substring matching attribute selectors, you can now do a[href$=".pdf"] { … } and not even need the class.
This seems to be the best answer for vertically centering content of :before/:after pseudo-elements: stackoverflow.com/a/14524161/470749
🤔🤗
😣😥