垂直对齐基线和利润

所以我有一些HTML/CSS，看起来像这样：http://jsfiddle.net/nw2Ym/1/垂直对齐基线和利润

CSS：

.heading { 
    font-size: 24px; 
} 

.badge { 
    font-size: 10px; 
    padding: 3px 10px; 
    background: gray; 
    color: #fff; 
    vertical-align: baseline; 
    margin-bottom: 3px; 
    display: inline-block; 

}

HTML：

<div> 
    <span class="heading">Testing Stuff</span> 
    <span class="badge">OMG!</span> 
</div> 

Other Text, Other Text, Other Text, Other Text, Other Text, Other Text, Other Text, Other Text, Other Text, Other Text, Other Text, Other Text, Other Text, Other Text, Other Text, Other Text, Other Text, Other Text, Other Text, Other Text, Other Text, Other Text, Other Text, Other Text, Other Text, Other Text, Other Text, Other Text, Other Text, Other Text, Other Text, Other Text, Other Text, Other Text, Other Text, Other Text, Other Text, Other Text, Other Text, Other Text, Other Text, Other Text, Other Text, Other Text,

我想是对齐徽章底部与文字底部相邻。相反，文本的底部与徽章中文字的底部对齐。

在这一点上，我想我会推动它的填充大小的徽章，所以我加了一个边距。而不是推动标签，它最终将其推下。为什么会发生？另外，如何对齐徽章以使底部（填充后）与文本对齐？

来源

2013-02-15 Parris

你所说的徽章意思？ – j08691 2013-02-15 20:36:40

@ j08691我更新了问题。我在html/css中将标签更改为徽章 – Parris 2013-02-15 20:37:46

我认为你正在寻找

vertical-align: text-bottom;

Here's a fiddle

来源

2013-02-15 20:51:26

是的！我觉得我尝试了每一个组合，但一定错过了这一个。谢谢！ – Parris 2013-02-15 20:53:36

垂直对齐基线和利润

回答

相关问题