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

Question

我试图将链接与图像居中,但似乎无法以任何方式垂直移动内容.

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

Answer 1

在阅读有关vertical-align CSS属性的建议后回答了我自己的问题.谢谢你的提示!

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

Answer 2

我不是CSS专家,但是如果你vertical-align: middle;加入你的.pdf:before指令怎么办？

Answer 3

您还可以使用表来完成此操作,例如:

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

Answer 4

我认为更简洁的方法是继承垂直对齐方式:

在html中:

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

并在CSS中:

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

这样,图标将以任何分辨率/字体大小组合正确对齐.非常适合与图标字体一起使用.

Answer 5

使用line-height属性搞乱应该可以解决问题.我没有对此进行测试,因此确切的值可能不正确,但从1.5em开始,并以0.1为增量进行调整,直到它排成一行.

.pdf{ line-height:1.5em; }

Answer 6

Using flexboxes did the trick for me:

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

Answer 7

我今天花了很多时间试图解决这个问题，但无法使用 line-height 或 vertical-align 来解决问题。我能找到的最简单的解决方案是将 <a/> 设置为相对定位，以便它包含绝对值，并将 :after 设置为绝对定位，将其从流中移除。

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

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

Answer 8

这对我有用：

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