I am trying to centre the link with the image, but can't seem to move the content vertically in any way.
<h4>More Information</h4>
<a href="#" class="pdf">File Name</a>The icon is 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 answers
Nekomusume
如果我们能知道过去的一切，就能知道未来⏳......
在我阅读了关于vertical-align这个CSS属性的建议后。
.pdf:before {
padding: 0 5px 0 0;
content: url(../img/icon/pdf_small.png);
vertical-align: -50%;
}
Ricciflows
好好学习，天天向上！
我不是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
🤔🤗
😣😥