0

我对一些 CSS 有一个小问题-> jsFiddle 上的示例

简单按钮：

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

CSS 规则：

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

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

提前致谢！

4

5 回答 5

6

将文本包裹在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/

于 2013-03-09T17:56:25.683 回答
2

添加vertical-align属性：

button#reset-btn:after {
content:" <<";
font-size:2em;
vertical-align: middle;
}
于 2013-03-09T17:56:36.700 回答
0

你可以试试...

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

}

在你的 JS fiddle CSS 下添加它。

于 2013-03-09T17:59:59.900 回答
0

我只想给内容一个位置：

button#reset-btn:after{
    content:" <<";
    font-size:2em;
    position: relative;
    top: 2px;
}
于 2013-03-09T18:04:03.510 回答
0

当不需要文本换行时，Kevin 的回答效果很好，但如果您的按钮有更多单词并开始一个新行，它看起来就不那么好了。

我最终将每种字体包装在一个潜水广告中，对它们都使用这个 css

display: table-cell;
vertical-align: middle

这就是我的意思

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

于 2018-08-10T00:35:18.440 回答