html - 在 css 中对齐跨度、段落和 anchor

Question

我不知道如何对齐这三个元素。我有这个方案:

<div class="main_box">
    <span class="title">Title</span>
    <p>Text goes here</p>
    <a class="button" href="#">Button</a>
</div>

CSS 是:

.title{
float:left;
display:inline-block;
}

p{
display: inline;
float: left;
width:100px;
}

.button{
display: inline;
float: right;
}

我把宽度放在 p 上，因为它的宽度是容器的宽度(我不想那样)。

有了这个，按钮( anchor )与段落对齐，但我想将其居中放置在标题和段落之间的某个位置。

我做错了什么？ :\我应该只在 anchor 上使用负边距吗？

编辑:我不够清楚，我需要这些元素的垂直对齐。我已经想通了这个问题。我可以使用负边距。

Answer 1

只要在这里使用display: inline-block;就可以了，不用float

.title, p, .button{
  display: inline-block;
  vertical-align: middle;
}

p{
  width:100px; /* you can add width if you want */
}