132

我正在尝试将链接与图像居中，但似乎无法以任何方式垂直移动内容。

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

图标为 22 x 22 像素

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

10 回答 10

151

在阅读了您对 vertical-align CSS 属性的建议后回答了我自己的问题。谢谢你的提示！

.pdf:before {
    padding: 0 5px 0 0;
    content: url(../img/icon/pdf_small.png);
    vertical-align: -50%;
}
于 2010-05-14T09:38:48.597 回答
30

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

于 2010-05-14T09:30:02.837 回答
26

您还可以使用表格来完成此操作，例如：

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

于 2016-07-02T19:42:09.313 回答
14

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

在 html 中：

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

在 CSS 中：

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

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

于 2013-04-02T08:38:00.453 回答
11

使用 flexboxes 对我有用：

.pdf:before {
    display: flex;
    align-items: center;
    justify-content: center;
}
于 2019-03-01T07:57:52.613 回答
6

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

.pdf{ line-height:1.5em; }
于 2010-05-14T09:35:02.770 回答
5

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.

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

于 2013-11-22T09:53:20.247 回答
5

这对我有用：

.pdf::before {
    content: url('path/to/image.png');
    display: flex;
    align-items: center;
    justify-content: center;
    height: inherit;
}
于 2019-10-01T17:00:50.577 回答
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;
}

如果没有跨度，那也可能有效。

于 2012-07-28T11:26:48.653 回答
3

我有一个类似的问题。这就是我所做的。由于我试图垂直居中的元素的高度 = 60px，我设法使用以下方法将其垂直居中：

顶部：计算（50% - 30px）；

于 2017-08-02T11:00:49.753 回答