向上移动按钮以与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可以解决问题。

Answer 2

你可以给你黄色方块

position:relative; top:-5px;

您可以在此处查看解决方案