html - 在我的例子中如何将垂直对齐设置为中间？

Question

我正在尝试修改 htmls 元素以实现两件事:

1. 将两个字形和文本垂直对齐到中间。(垂直居中不起作用)

2. 修改 css 使文本“thanks”和字形之间有一个小间隙，变成类似于 <icon><thanks><icon> 的东西而不是 <icon> <thanks> <icon>

我创建了一个 jsfiddle: https://jsfiddle.net/vwdhd1wy/

它在没有任何额外的 CSS 的情况下创建了两个间隙，这似乎很奇怪。有人可以帮助我吗？

Answer 1

工作代码:https://jsfiddle.net/vwdhd1wy/4/

对于 1. 将两个字形和文本垂直对齐到中间。 (垂直居中对齐不起作用)。

您真的可以整理 CSS，因为您不想重复代码。将 vertical-align: top; 添加到所有 span 元素以确保它们都从相同的位置开始，因为彼此相邻的内联 block 元素可能会变得困惑，具体取决于它们的内容。

.glyphicon 有一些继承代码设置line-height: 1 和top: 1px; 所以你需要覆盖这与 div > span.glyphicon { line-height: 30px;顶部:0px； }。剩下的只是设置 height: 30px; 和 line-height: 30px;(将它放在中间的 line-height)。

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”和字形之间有一个小间隙，变成类似于而不是

正如@ryantdecker 所说，删除所有 span 元素后的空格以删除显示的额外空间。你得到这个空白是因为当设置为 inline-block 时它被视为“内联”(文本)元素，所以每当内联元素之间有空格时，它也会在呈现 HTML 时包含该空格。

解决方法:

<span class="left glyphicon glyphicon-forward"></span><span class="middle">Thansk</span><span class="right glyphicon glyphicon-backward"></span>