为什么更改行高只会影响字体的顶部？

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/