Question

我疯了。我已阅读了数十篇博客文章和不同的stackoverflow帖子，但我无法垂直居中FontAwesome图标，该图标作为内容放置在链接元素的伪元素之前的css内。

这是我的CSS代码：

a.button {
    background-color: green;
    padding: 5px 10px;
    color: #ffffff;
    cursor: pointer;
    position: relative;
    display: inline-block;
}

a.button.forward {
    padding-right: 35px;
}

a.button.back {
    padding-left: 35px;
}

a.button.back:before {
    font-family: FontAwesome;
    content: "\f100";
    font-size: 1em;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 10px;
}

那就是HTML代码：

<a class="button back">back to<br/>whatever</a>

在这里，您可以找到一个显示我的问题的小提琴：https://jsfiddle.net/r1vysfaf/1

更新：

我想避免使用javascript来解决样式问题。此外，链接的文本是动态的，因此它不是使用“常量魔术”间距填充/边距/顶部的解决方案。

Answer 1

将display: table用于父级，将table-cell用于子级并更改您的css，如下所示：

＆＃13;

a.button {
    background-color: green;
    padding: 5px 10px;
    color: #ffffff;
    cursor: pointer;
    position: relative;
    display: table;
}

a.button.forward {
    padding-right: 35px;
}

a.button.back {
    padding-left: 10px;
}

a.button.back:before {
  font-family: FontAwesome;
  content: "\f100";
  font-size: 1em;
  line-height: 1em;
  display: table-cell;
  vertical-align: middle;
  padding: 0 10px 0 0;
}

＆＃13;

    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
    <a class="button back">back to<br/>whatever</a>

＆＃13;

Answer 2

更新

添加了前进按钮，加上ems中的位置值，因此字体大小或元素的增加或减少不会抵消图标。

而不是relative，在伪元素上使用a.button { background-color: green; padding: 5px 10px; color: #ffffff; cursor: pointer; position: relative; display: inline-block; } a.button.forward { padding-right: 35px; } a.button.back { padding-left: 35px; } a.button.back:before { font-family: FontAwesome; content: "\f100"; font-size: 1em; position: relative; top: .625em; bottom: 0; right: 1.25em; } a.button.forward:after { font-family: FontAwesome; content: "\f101"; font-size: 1em; position: relative; top: -.5em; left: 1.25em; }。

FIDDLE

段

＆＃13;

<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css'>
<a class="button back">Back to<br/>whatever</a>
<a class="button back" style='font-size: 1.5em'>Font-size is<br/>increased by 50%</a>
<a class="button forward">Next to<br/>whatever</a>
<a class="button forward" style='font-size: .5em'>Font-size is<br/>decreased by 50%</a>

＆＃13;

.display_close:hover .show_close_div

＆＃13;

如何在内容垂直之前将css中的FontAwesome图标居中

2 个答案:

更新

段