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;
}
Consider using flex: stackoverflow.com/a/22218694/435605 - the answer is for text but works on all elements.
2024-10-29 20:14:46 10Reply
Thanks to CSS3's substring matching attribute selectors, you can now do a[href$=".pdf"] { … } and not even need the class.
2024-10-29 20:16:40 00Reply
This seems to be the best answer for vertically centering content of :before/:after pseudo-elements: stackoverflow.com/a/14524161/470749
2024-10-29 20:17:07 00Reply
@Ricciflows: 🤔🤗
2024-10-29 20:29:50 00Reply
@Ricciflows: 😣😥
2024-10-29 20:38:26 00Reply
2 answers
在我阅读了关于vertical-align这个CSS属性的建议后。
.pdf:before {
padding: 0 5px 0 0;
content: url(../img/icon/pdf_small.png);
vertical-align: -50%;
}我不是CSS方面的专家，但如果你将vertical-align: middle; 放到你的 .pdf:before 指令里会怎么样？