Aligning span, paragraph and anchor in css

Question

I cannot figure out how to align these three elements. I have this scheme:

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

CSS is:

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

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

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

I put the width on p , because it's width is the width of container (and I don't want that).

With this, the button (anchor) is aligned with the paragraph, but I'd like to center it more, somewhere between title and paragraph.

What am I doing wrong? :\\ Should I just use negative margin on the anchor?

EDIT: I wasn't clear enough, I need vertical alignment of these elements. I've figured out the problem. I can use negative margins.

Answer 1

I'm not sure what you're exactly going for but I think it's something like this:

http://jsfiddle.net/kS4Dp/

You can change the width of the <p> to whatever is appropriate!

Answer 2

The 'P' has a margin try:

p {     margin: 0;

http://jsfiddle.net/ZL2ef/

Answer 3

Update your CSS like below.

.title{
float:left;
}

p{
float:left;
width:100px;
padding:0;
margin:0;
}
.button{
float:right;
}

DEMO

Answer 4

Simply you can use here display: inline-block; no need to use float

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

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