纵向对齐 CSS: before 和: after 内容

我试图中心的链接与图像，但似乎不能移动的内容在任何方式垂直。

<h4>More Information</h4>
<a href="#" class="pdf">File Name</a>

图标是22x22px

.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;
}
179623 次浏览
小开

我不是 CSS 专家，但是如果将 vertical-align: middle;放入到 .pdf:before指令中会发生什么？

小开

使用 line-height 属性应该可以解决这个问题。我还没有测试过这个，所以确切的值可能不正确，但是从1.5 em 开始，以0.1的增量进行调整，直到它对齐。

.pdf{ line-height:1.5em; }
小开
最佳答案

在阅读了您关于垂直对齐 CSS 属性的建议之后，我回答了我自己的问题！

.pdf:before {
padding: 0 5px 0 0;
content: url(../img/icon/pdf_small.png);
vertical-align: -50%;
}
小开

我想我找到了一个很好的解决办法。诀窍是设置图像(或任何内容) height的 line-height。

短信

使用 CSS:

div{
line-height: 26px; /* height of the image in #submit span:after */
}


span:after{
content: url('images/forward.png');
vertical-align: bottom;
}

如果没有跨度，这种方法可能也会奏效。

小开

我认为一种更清晰的方法是继承垂直排列:

在 html:

<div class="shortcut"><a href="#">Download</a></div>

在 css 中:

.shortcut {
vertical-align: middle;
}
.shortcut > a:after {
vertical-align: inherit;
{

这样图标就可以在任何分辨率/字体大小的组合中正确对齐。

小开

今天我花了很多时间试图解决这个问题，但是不能使用线高或者垂直对齐来解决问题。我能够找到的最简单的解决方案是将 < a/> 设置为相对定位，这样它就包含了绝对值，而将: after 设置为绝对定位使其脱离流。

a{
position:relative;
padding-right:18px;
}
a:after{
position:absolute;
content:url(image.png);
}

在这种情况下，后面的图像似乎自动居中，至少在 Firefox/Chrome 下是这样。这对于不支持: after 的浏览器来说可能有点草率，因为 < a/> 上有过多的间隔。

小开

您还可以使用表来完成这项工作，如:

.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/

小开

我也有过类似的问题。我是这么做的。因为我试图垂直居中的元素的高度 = 60px，我设法垂直居中它使用:

上图: calc (50%-30px) ;

小开

使用弹性工具箱为我带来了好处:

.pdf:before {
display: flex;
align-items: center;
justify-content: center;
}
小开

这就是对我有效的方法:

.pdf::before {
content: url('path/to/image.png');
display: flex;
align-items: center;
justify-content: center;
height: inherit;
}

提交答案