垂直对齐CSS:之前和之后的内容

前端之家收集整理的这篇文章主要介绍了垂直对齐CSS:之前和之后的内容前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我试图集中与图像的链接,但似乎不能以任何方式垂直移动内容
<h4>More Information</h4>
<a href="#" class="pdf">File Name</a>

图标为22 x 22像素

.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;
}

解决方法

在阅读了关于vertical-align CSS属性的建议之后回答了我自己的问题。谢谢你的提示
.pdf:before {
    padding: 0 5px 0 0;
    content: url(../img/icon/pdf_small.png);
    vertical-align: -50%;
}

猜你在找的CSS相关文章