CSS - 如何将不同的字体大小相互对齐？

Question

我对一些CSS有一个小问题 - ＆gt; Example on jsFiddle

简单按钮：

<button type="reset" id="reset-btn">Reset</button>

CSS规则：

button#reset-btn:after{
    content:" <<";
    font-size:2em;
}

正如您所见，“＆lt;＆lt;”是通过CSS生成的。有没有办法将这两种不同的字体大小相互对齐，以便旁边的文字更大“＆lt;＆lt;＆lt;”是在按钮的垂直中心？

提前致谢！

Answer 1

将文字换入span标记，然后将样式vertical-align: middle应用于button和span

<强> HTML

<button type="reset" id="reset-btn"><span id="reset-text">Reset</span></button>

<强> CSS

button#reset-btn:after{
    content:" <<";
    font-size:2em;
    vertical-align: middle;
}

#reset-text{
    vertical-align:middle;
}

工作示例： http://jsfiddle.net/Eh8TB/3/

Answer 2

添加vertical-align属性：

button#reset-btn:after {
content:" <<";
font-size:2em;
vertical-align: middle;
}

Answer 3

你可以试试......

button#reset-btn:after, button#reset-btn{
font-size:1em;

}

在你的JS小提琴CSS下添加。

Answer 4

我只想给内容一个位置：

button#reset-btn:after{
    content:" <<";
    font-size:2em;
    position: relative;
    top: 2px;
}

Answer 5

当不需要换行时，Kevin的答案很好用，但是如果您的按钮上还有几个单词并开始换行，那么效果就不太好了。

我最终将每种字体包装在潜水广告中，并使用这两个CSS

display: table-cell;
vertical-align: middle

这就是我的意思

工作解决方案 http://jsfiddle.net/Eh8TB/71/