html - 为什么更改 line-height 只会影响字体的顶部？

Question

我正在使用点 HTML 字符来制作不同颜色的图标。我遇到的问题是 line-height 属性似乎只影响字符顶部的放置位置。我无法让点图标与常规文本正确对齐，即使设置的行高与文本的标准字体大小相匹配。

HTML
<div>
  <b>Legend:</b>
  <span class="dotib">&#8226;</span>
</div>

CSS
.dotib{font-size: 36pt; line-height: 12pt;}

有没有更好的方法让这个点表现得像我期望的那样？

这是一个带有此代码的 jsFiddle：http: //jsfiddle.net/TzFff/

Answer 1

改成这样：

.dotib {
    font-size: 36pt; 
    line-height: 12pt;
    vertical-align:middle;
    padding-bottom:5px;
}

http://jsfiddle.net/TzFff/1/