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

9

それは本当に簡単です。あなたは与えるべきです

vertical-align: top;

:before 要素に。

更新された jsFiddle: http://jsfiddle.net/Pz7vF/

于 2014-04-20T20:00:30.437 に答える