垂直对齐 CSS :before 和 :after 内容 [重复]答案

【问题标题】：Vertically aligning CSS :before and :after content [duplicate]垂直对齐 CSS :before 和 :after 内容 [重复]
【发布时间】：2011-02-19 10:54:06
【问题描述】：

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

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

【问题讨论】：

考虑使用 flex:stackoverflow.com/a/22218694/435605 - 答案是文本，但适用于所有元素。
感谢 CSS3 的substring matching attribute selectors，您现在可以使用a[href$=".pdf"] { … }，甚至不需要上课。
这似乎是 :before/:after 伪元素垂直居中内容的最佳答案：stackoverflow.com/a/14524161/470749

标签： css css-content

【解决方案1】：

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

【讨论】：

太棒了，中间没用，所以我不得不改用负百分比，谢谢提醒！
很高兴为您提供帮助。 “中间人”是什么都没做，还是做一些你想要的但不是你想要的？

【解决方案2】：

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

.pdf{ line-height:1.5em; }

【讨论】：

这应该可以解决文本内容的问题！

【解决方案3】：

在阅读了您关于垂直对齐 CSS 属性的建议后回答了我自己的问题。感谢您的提示！

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

【讨论】：

不错。对我有用的是 vertical-align:super;
这种以 % 为单位的负值垂直对齐非常棒。以前不知道。

【解决方案4】：

我想，我刚刚找到了一个非常巧妙的解决方案。诀窍是设置图像（或任何内容）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;
}

如果没有跨度，这可能也可以工作。

【讨论】：

【解决方案5】：

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

在html中：

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

在 css 中：

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

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

【讨论】：

完美。简洁大方

【解决方案6】：

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

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

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

【讨论】：

【解决方案7】：

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

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

【讨论】：

这些小提琴都不能在 Chrome 52 上运行
它们都适用于 Chrome 版本 52.0.2743.116（64 位）（Linux）
两者都不适用于 OSX。 imgur.com/bqUQ09X
问题是关于垂直对齐 :before 和 :after 元素，这就是小提琴所做的，也在你的截图中
“我正在尝试将链接与图像居中”，这在示例或我的屏幕截图中都没有完成

【解决方案8】：

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

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

【讨论】：

【解决方案9】：

使用 flexbox 对我有用：

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

【讨论】：

【解决方案10】：

这对我有用：

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

【讨论】：