8

我的段落的高度/行高为 50px 和text-align: center,它使文本居中。但是 p:before 导致它的高度/行高增加,导致文本向下颠簸。我希望 p 和 p:before 都垂直居中。

http://jsfiddle.net/MMAUy/

<p>Hover This</p>

p {
    background: red;
    text-align: center;
    height: 50px;
    line-height: 50px;
    font-size: 14px;
}

p:hover:before {
    content: "icon";
    display: inline-block;
    margin-right: 10px;
    font-size: 3em;
}

文字长度各不相同,所以我认为我不能只position: absolute用于图标...

4

3 回答 3

12

之所以会出现这种情况,是因为line-height:before元素继承,这也是一个inline-block元素。

您可以通过浮动:before内容来解决此问题,从而将其从流程中移除,使其不受line-height.

jsFiddle在这里

HTML

<div>
  <p>Hover This</p>
</div>

CSS

div {
    background: red;
    height: 50px;
    line-height: 50px;
    font-size: 14px;
    text-align:center;
}

div:hover p:before {
    content: "icon icon icon icon";
    margin-right: 10px;
    font-size: 42px;
    float:left;
}
p {
    display:inline-block;
    margin:0px;
}
于 2013-10-18T00:23:30.960 回答
9

这真的很简单。你应该给

vertical-align: top;

到 :before 元素。

您更新的 jsFiddle:http: //jsfiddle.net/Pz7vF/

于 2014-04-20T20:00:30.437 回答
0

对我有用的是使用 !important,只要您还没有在元素中使用它。

element {
  line-height : 110%;
}

element::before {
  content : "HI";
  line-height : 40px !important;
}
于 2018-10-14T09:30:02.317 回答