Question

请有人可以帮我这个，我已经过了拔头发的舞台，不想结束光头！

搜索过SO，读取并修改内联/内联块，浮动，行高和＆amp; ＆gt;的字体大小属性好几天，我有一个问题，我仍然无法理解 - 对齐两个文本元素的基线。

我正在创建一个带有图像和两个文本元素的简单（ish）按钮：标题和标签。我希望在相邻SPANS中分隔的文本元素与标题和标签在不同的FONT-SIZES中（旨在使标签右对齐）。

我只是希望相邻跨距中的文本在行高中垂直居中，但是位于共同基线上。麻烦就是当我接近使用下面提到的方法时，我仍然在各种浏览器上看到不同的结果（特别是Opera）。我不愿意进入特定于浏览器的CSS调整，因为几乎每个浏览器的结果似乎都略有不同。

其他所有内容似乎都很好，所以我已经删除了不必要的代码元素（以及使基线对齐的各种失败的努力，例如行高，垂直对齐，填充，边距等等）。所以我意识到我所拥有的是不会按原样运作的。我还夸大了字体大小的差异，以更清楚地显示问题。

如果这个问题与时间本身一样久，我道歉，但我在SO上找到的任何内容似乎都无法解决我的问题。

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/

我确信这一定很简单，但我已经尝试了一切我能想到的，阅读我能找到的与该主题相关的每一个链接 - 都无济于事。任何帮助将不胜感激。

Answer 1

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

eJsfiddle http://jsfiddle.net/sRLyM/1/

在相邻的<spans> </spans>中对齐不同大小的文本

1 个答案: