垂直alignmentCSS：之前和之后：内容
我正在尝试将图片链接居中，但似乎无法以任何方式垂直移动内容。
<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; }
阅读垂直alignmentCSS属性的build议后，回答我自己的问题。 谢谢你的提示！
.pdf:before { padding: 0 5px 0 0; content: url(../img/icon/pdf_small.png); vertical-align: -50%; }
我不是CSS专家，但是如果将vertical-align: middle; 进入你的.pdf:before指令？
我认为一个更清洁的方法是inheritance垂直alignment：
在html中：
<div class="shortcut"><a href="#">Download</a></div>
在CSS中：
.shortcut { vertical-align: middle; } .shortcut > a:after { vertical-align: inherit; {
这样，图标将在任何分辨率/字体大小的组合中正确alignment。 非常适合使用图标字体。
你也可以使用表来完成这个，比如：
.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/
乱七八糟的行高属性应该做的伎俩。 我没有testing过这个，所以确切的值可能不对，但是从1.5em开始，并以0.1为增量调整它直到排列。
.pdf{ line-height:1.5em; }
我花了大量的时间尝试今天的工作，并不能使用行高或垂直alignment工作。 我能够find的最简单的解决scheme是设置相对定位，使其包含绝对值，而后：将其定位在绝对stream量之外。
a{ position:relative; padding-right:18px; } a:after{ position:absolute; content:url(image.png); }
在这种情况下，后图像似乎自动居中，至less在Firefox / Chrome下。 对于不支持的浏览器来说，这样做可能会稍微松一些，因为<a/>上的空间过大。
我想，我刚刚find了一个很好的解决scheme。 诀窍是设置图像（或任何内容） height的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; }
这可能也没有跨度的工作。
我有一个类似的问题。 这是我做的。 由于我试图垂直居中的元素高度= 60px，我设法垂直居中使用：
top：calc（50％ – 30px）;
