我正努力将链接与图像居中，但似乎无法以任何方式垂直移动内容。
<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;
}
Consider using flex: stackoverflow.com/a/22218694/435605 - the answer is for text but works on all elements.
2024-10-29 20:14:46 10回复
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 00回复
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 00回复
回复 @Ricciflows: 🤔🤗
2024-10-29 20:29:50 00回复
回复 @Ricciflows: 😣😥
2024-10-29 20:38:26 00回复
2个回答
在我阅读了关于vertical-align这个CSS属性的建议后。
.pdf:before {
padding: 0 5px 0 0;
content: url(../img/icon/pdf_small.png);
vertical-align: -50%;
}