我试图将链接与图像居中,但似乎无法以任何方式垂直移动内容。
<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;
}
答案 0 :(得分:112)
在阅读有关vertical-align CSS属性的建议后回答了我自己的问题。谢谢你的提示!
.pdf:before {
padding: 0 5px 0 0;
content: url(../img/icon/pdf_small.png);
vertical-align: -50%;
}
答案 1 :(得分:23)
我不是CSS专家,但是如果你将vertical-align: middle;
放入.pdf:before
指令会怎样?
答案 2 :(得分:16)
您也可以使用表格来完成此操作,例如:
.pdf {
display: table;
}
.pdf:before {
display: table-cell;
vertical-align: middle;
}
以下是一个示例:https://jsfiddle.net/ar9fadd0/2/
编辑: 您也可以使用flex来完成此任务:
.pdf {
display: flex;
}
.pdf:before {
display: flex;
align-items: center;
}
以下是一个示例:https://jsfiddle.net/ctqk0xq1/1/
答案 3 :(得分:9)
我认为更简洁的方法是继承垂直对齐方式:
在html中:
<div class="shortcut"><a href="#">Download</a></div>
在css中:
.shortcut {
vertical-align: middle;
}
.shortcut > a:after {
vertical-align: inherit;
{
这样,图标将以任何分辨率/字体大小组合正确对齐。非常适合与图标字体一起使用。
答案 4 :(得分:6)
使用line-height属性搞乱应该可以解决问题。我没有对此进行测试,因此确切的值可能不正确,但从1.5em开始,并以0.1为增量进行调整,直到它排成一行。
.pdf{ line-height:1.5em; }
答案 5 :(得分:4)
line-height
图像(或任何内容)height
。
文本
使用CSS:
div{
line-height: 26px; /* height of the image in #submit span:after */
}
span:after{
content: url('images/forward.png');
vertical-align: bottom;
}
如果没有跨度,这可能也会有效。
答案 6 :(得分:4)
我今天花了很多时间尝试解决这个问题,并且无法使用line-height或vertical-align来解决问题。我能找到的最简单的解决方案是设置&lt; a /&gt;相对定位所以它将包含绝对值,并且:在被定位后绝对将它从流中取出。
a{
position:relative;
padding-right:18px;
}
a:after{
position:absolute;
content:url(image.png);
}
在这种情况下,后映像似乎自动居中,至少在Firefox / Chrome下。对于不支持的浏览器来说,这可能有点麻烦:之后,由于&lt; a /&gt;上的间距过大。
答案 7 :(得分:2)
使用flexbox对我有用:
.pdf:before {
display: flex;
align-items: center;
justify-content: center;
}
答案 8 :(得分:1)
这对我有用:
.pdf::before {
content: url('path/to/image.png');
display: flex;
align-items: center;
justify-content: center;
height: inherit;
}
答案 9 :(得分:0)
我有类似的问题。这就是我做的。由于我试图垂直居中的元素高度= 60px,我设法使用:
垂直居中top:calc(50% - 30px);