垂直对齐 CSS :before 和 :after 内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2833027/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Vertically aligning CSS :before and :after content
提问by theorise
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
图标为 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;
}
回答by theorise
Answered my own question after reading your advice on the vertical-align CSS attribute. Thanks for the tip!
在阅读了您对 vertical-align CSS 属性的建议后回答了我自己的问题。谢谢你的提示！
.pdf:before {
padding: 0 5px 0 0;
content: url(../img/icon/pdf_small.png);
vertical-align: -50%;
}
回答by Chowlett
I'm no CSS expert, but what happens if you put vertical-align: middle;into your .pdf:beforedirective?
我不是 CSS 专家，但是如果您将其vertical-align: middle;放入.pdf:before指令中会发生什么？
回答by fassl
You can also use tables to accomplish this, like:
您还可以使用表格来完成此操作，例如：
.pdf {
display: table;
}
.pdf:before {
display: table-cell;
vertical-align: middle;
}
Here is an example: https://jsfiddle.net/ar9fadd0/2/
这是一个例子：https: //jsfiddle.net/ar9fadd0/2/
EDIT: You can also use flex to accomplish this:
编辑：您还可以使用 flex 来完成此操作：
.pdf {
display: flex;
}
.pdf:before {
display: flex;
align-items: center;
}
Here is an example: https://jsfiddle.net/ctqk0xq1/1/
这是一个例子：https: //jsfiddle.net/ctqk0xq1/1/
回答by Sander van den Akker
I think a cleaner approach is to inherit the vertical alignment:
我认为更简洁的方法是继承垂直对齐：
In html:
在 HTML 中：
<div class="shortcut"><a href="#">Download</a></div>
And in css:
在 css 中：
.shortcut {
vertical-align: middle;
}
.shortcut > a:after {
vertical-align: inherit;
{
This way the icon will align properly in any resolution/font-size combination. Great for use with icon fonts.
这样，图标将在任何分辨率/字体大小组合中正确对齐。非常适合与图标字体一起使用。
回答by David Refoua
Using flexboxes did the trick for me:
使用 flexboxes 对我有用：
.pdf:before {
display: flex;
align-items: center;
justify-content: center;
}
回答by Mathew
Messing around with the line-height attribute should do the trick. I haven't tested this, so the exact value may not be right, but start with 1.5em, and tweak it in 0.1 increments until it lines up.
弄乱 line-height 属性应该可以解决问题。我没有测试过这个，所以确切的值可能不正确，但从 1.5em 开始，以 0.1 的增量调整它直到它对齐。
.pdf{ line-height:1.5em; }
回答by JoomFever
I just found a pretty neat solution, I think. The trick is to set the line-heightof image (or any content) height.
我刚刚找到了一个非常巧妙的解决方案，我想。诀窍是设置line-height图像（或任何内容）的height。
Using CSS:
使用 CSS：
div{
line-height: 26px; /* height of the image in #submit span:after */
}
span:after{
content: url('images/forward.png');
vertical-align: bottom;
}
That would probably also work without the span.
如果没有跨度，那可能也可以工作。
回答by Kenneth M. Kolano
I spent a good amount of time trying to work this out today, and couldn't get things working using line-height or vertical-align. The easiest solution I was able to find was to set the <a/> to be relatively positioned so it would contain absolutes, and the :after to be positioned absolutely taking it out of the flow.
我今天花了很多时间试图解决这个问题，但无法使用 line-height 或 vertical-align 来解决问题。我能找到的最简单的解决方案是将 <a/> 设置为相对定位，以便它包含绝对值，并将 :after 设置为绝对定位，将其从流中移除。
a{
position:relative;
padding-right:18px;
}
a:after{
position:absolute;
content:url(image.png);
}
The after image seemed to automatically center in that case, at least under Firefox/Chrome. Such may be a bit sloppier for browsers not supporting :after, due to the excess spacing on the <a/>.
在这种情况下，后图像似乎会自动居中，至少在 Firefox/Chrome 下是这样。这对于不支持 :after 的浏览器来说可能有点草率，因为 <a/> 上的间距过大。
回答by user2606576
I had a similar problem. Here is what I did. Since the element I was trying to center vertically had height = 60px, I managed to center it vertically using:
我有一个类似的问题。这是我所做的。由于我尝试垂直居中的元素具有高度 = 60px，因此我设法使用以下方法将其垂直居中：
top: calc(50% - 30px);
顶部：计算（50% - 30px）；
回答by Gjaa
This is what worked for me:
这对我有用：
.pdf::before {
content: url('path/to/image.png');
display: flex;
align-items: center;
justify-content: center;
height: inherit;
}
