How to place buttons in the same line, center, and not too close to each other?

Question

I have 2 buttons :

• Download
• Edit

I want to place both of them in same line, side by side, but not too far away from each other either.

As of right now this what I have

I try to give them class pull-left and pull-right This what they come out to be

They're too far away. :(

I want them to look something like this. Possible, with the vertical line in the middle. I am not sure how to do that.

Here is my HTML Code

<p>
    <span>
        <a class="btn-1" href="/marketing_materials/{{$marketing_material->id}}/download/media_path">
            Download
        </a>
    </span>
</p>
<p>
    <span>
        <a class="btn-2" href="{{ URL::to('marketing_materials/'.$marketing_material->id.'/edit') }}">
            Edit
        </a>
    </span>
</p>

What should I do to get close to what I want ?

Answer 1

• You had 2 <p> tags, combine them into 1.
• Place them in the same <p> tag so that they will be in same line as you wanted.
• Add style="text-align:center;" into your <p> tag.
• Add a bunch of   between them to maintain the spaces
• For your vertical pipeline, just do this  | 

Try this

<p style="text-align:center;">
    <span>
        <a class="btn-1 pull" href="/marketing_materials/{{$marketing_material->id}}/download/media_path">
            Download
        </a>
    </span>
    &nbsp;&nbsp;&nbsp;
    <span>
        <a class="btn-2" href="{{ URL::to('marketing_materials/'.$marketing_material->id.'/edit') }}">
            Edit
        </a>
    </span>
</p>