Text 相邻文本中不同大小文本的对齐<；跨度>；

请有人帮我一下，我已经过了脱发的阶段，不想最后秃头了

搜索了这么多，阅读了关于内联/内联块、浮点、行高和字体大小属性的内容并对其进行了修补，几天后，我遇到了一个我仍然无法理解的问题——对齐两个文本元素的基线

我正在创建一个简单的（ish）按钮，其中包含一个图像和两个文本元素：标题和标签。我想用不同字体大小的标题和标签在相邻的跨距中分开文本元素（目标是标签右对齐）

我只希望相邻跨距中的文本在线高度内垂直居中，但位于公共基线上。问题是，即使使用下面提到的方法，我仍然可以在不同的浏览器上看到不同的结果（尤其是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>

标记：

.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:

---

我相信这一定很简单，但我已经尝试了我能想到的一切，阅读了我能找到的每一个与这个主题相关的链接——都没有用。任何帮助都将不胜感激。

我不确定我是否理解你在寻找什么，所以如果我错了，请告诉我。 我认为你们需要使高度线等于你们的外部元素的高度

---

eJsfiddle

您好，谢谢您的回复。我检查了JSFIDLE，它不是我想要的，但是感谢您的帮助。。。我想我的解释太详细了。对不起，它不允许我编辑以前的。。谢谢你的回复，我想我的解释有些过分了。我检查了链接&这不是我需要的；我已经在两个内跨/外跨上尝试了线高度：25px，但没有效果。我有一个外部跨距，我想是25px高，在这里面还有两个跨距-都是浮动的，一个左边是14px字体大小，一个右边是8px字体大小。我希望两者都在25px线高度内垂直居中，但在同一基线上，所以它们看起来不奇怪。我似乎无法做到这一点，但我尝试。。。我希望这更有意义。