html - 向上移动按钮以与 h2 文本对齐

Question

这是当前解决方案的图像:

我想将黄色框向上移动以与文本对齐。看起来比文字低

这是我的 html:

<a href=""><h3>Cheetah Palm Beach
<span class="badges">TEST</span></h3></a>

这是我的 h3 标题的 CSS:

h3 {
position: absolute;
left: 353px;
top: 20px;
font: 30px/30px DinWebCond, Sans-serif;
color: #404040;
text-decoration: none;
margin: 0px;
}

这是我为黄色框设置的 CSS:

span.badges {
font: 14px/14px DinWebCond,Sans-serif;
text-transform: uppercase;
padding: 5px 7px 3px 7px;
color: #ffffff;
background-color: #e3ab15;
border-radius: 2px;
margin-bottom: 5px;
margin-left: 15px;
width: 165px;
text-align: center;
top: 0px;
}

我不知道如何解决这个问题。

感谢帮助

Answer 1

如果要与顶部对齐，请将 vertical-align: top; 给 span.badges。并设置填充 padding: 0px 7px 0px 7px; 因为它会让它看起来像顶部对齐然后文本。

Fiddle

否则，如果您想对齐到左侧文本的底部，则只需像上面那样更改填充。

Fiddle

这里 vertical-align 可以解决问题。