我正在尝试修改 htmls 元素以实现两件事：
垂直对齐两个字形和文本到中间。（垂直对齐中间不起作用）
修改 css 以在文本“thanks”和 glyphicons 之间有一个小间隙，变成类似<icon><thanks><icon>而不是<icon> <thanks> <icon>
我创建了一个 jsfiddle：https ://jsfiddle.net/vwdhd1wy/
它在没有任何额外 css 的情况下创造了两个差距似乎很奇怪。有人可以帮我吗？
工作代码：https : //jsfiddle.net/vwdhd1wy/4/
对于 1. 垂直对齐两个字形和文本到中间。（垂直对齐中间不起作用）。
您可以真正整理 CSS，因为您不想要重复的代码。添加vertical-align: top;到所有 span 元素以确保它们都从与彼此相邻的内联块元素相同的位置开始，这取决于它们的内容。
有一些继承的代码.glyphicon正在设置line-height: 1，top: 1px;因此您需要使用div > span.glyphicon { line-height: 30px; top: 0px; }. 其余的只是设置height: 30px;和line-height: 30px;（将其放置在中间的行高）。
div > span {
display: inline-block;
vertical-align: top;
}
div > span, div > span.glyphicon {
height: 30px;
line-height: 30px;
top: 0px;
}
.left, .right {
background-color: red;
}
.middle {
background-color: grey;
}
对于 2. 修改 css 以在文本“thanks”和 glyphicons 之间有一个小间隙，变成类似而不是
正如@ryantdecker 所说，删除所有 span 元素之后的空格以删除显示的额外空间。您会得到这个空白，因为它在设置为 inline-block 时被视为“内联”（文本）元素，因此只要内联元素之间有空格，它也会在呈现 HTML 时包含该空格。
解决方案：
<span class="left glyphicon glyphicon-forward"></span><span class="middle">Thansk</span><span class="right glyphicon glyphicon-backward"></span>
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句