【发布时间】：2013-04-05 06:00:51
【问题描述】：
请有人可以帮我解决这个问题，我已经过了拔头发的阶段，不想光头了！
在搜索 SO、阅读并修改 inline/inline-block、float、line-height 和 font-size 属性几天后，我遇到了一个我仍然无法理解的问题 - 对齐两个文本的基线元素。
我正在创建一个带有图像和两个文本元素的简单（ish）按钮：标题和标签。我希望在相邻 SPANS 中分隔的文本元素具有不同 FONT-SIZES 的标题和标签（旨在使标签右对齐）。
我只希望相邻跨度中的文本在行高内垂直居中，但位于公共基线上。问题是即使我使用下面提到的方法接近，我仍然在各种浏览器（尤其是 Opera）上看到不同的结果。我不愿意进行特定于浏览器的 CSS 调整，因为几乎每个浏览器的结果似乎都略有不同。
其他一切似乎都很好，所以我已经删除了代码中不必要的元素（以及使基线对齐的各种失败的努力，例如行高、垂直对齐、填充、边距等）。所以我意识到我所拥有的不会像现在这样工作。我还夸大了字体大小的差异以更清楚地显示问题。
如果这个问题与时间本身一样古老，我深表歉意，但我在这里找到的任何东西似乎都无法解决我的问题。
CSS：
.sn-border {
position: relative;
display: block;
width: 237px;
height: 25px;
border-bottom: 1px solid #54534A;
overflow: hidden;
}
.sn-border span { display: block; overflow: hidden; }
.sn-label { width: 100%; line-height: 25px; }
.sn-title, .sn-tag { float: left; }
.sn-title { width: 165px; font-size: 14px; color: #54534A; }
.sn-tag { width: 72px; font-size: 8px; text-align: right; color: #8C8C8C; }
标记：
<a href="#" class="sn-border">
<span class="sn-label">
<span class="sn-title">Example Heading 001</span>
<span class="sn-tag">Example Label</span>
</span>
</a>
JSFiddle： http://jsfiddle.net/sRLyM/
我确信这一定很简单，但我已经尝试了我能想到的一切，阅读了我能找到的与该主题相关的所有链接 - 一切都无济于事。任何帮助将不胜感激。
【问题讨论】：
标签： text html font-size baseline