CODEWITHSUNDEEP
htmlbutton
James Donovan
James Donovan

Reputation: 13

How to horizontally align two buttons in html

I'm stuck working with this code on my company's site. I can't seem to figure out how to float the buttons with the code given. 

<div class="text-center"><a class="text-center" href="/contact-us"><button class="btn btn-small btn-default"><i class="fa fa-envelope" aria-hidden="true"></i>CONTACT US</button></a></div>

<div style="text-align:center;"><a href="/send-flowers"><button class="text-center btn btn-default" style="padding-top:5px;"> <i class="material-icons" style="vertical-align: middle; font-size:1.25em;">local_florist</i>SEND FLOWERS</button></a></div>

Current view. Links to imgur.

Any help would be greatly appreciated. Thanks so much

Upvotes: 1

Views: 616

Answers (2)

Arun Kumaresh
Arun Kumaresh

Reputation: 6311

try this 

<div class="center">

<button id="btn1">Button1</button>
<button id="btn2">Button2</button>

</div>

css

#btn1, #btn2
{
    width:20%;
    float:left;
}

Upvotes: 1

A.D.
A.D.

Reputation: 2372

You can use float left or right for horizontal align and for centralize use margin and as in bootstrap use pull-left or `pull-right class for the same.

like:

<div class="text-center pull-left"><a class="text-center" href="/contact-us"><button class="btn btn-small btn-default"><i class="fa fa-envelope" aria-hidden="true"></i>CONTACT US</button></a></div>

<div style="text-align:center;" class="pull-left"><a href="/send-flowers"><button class="text-center btn btn-default" style="padding-top:5px;"> <i class="material-icons" style="vertical-align: middle; font-size:1.25em;">local_florist</i>SEND FLOWERS</button></a></div>

Upvotes: 1

Related Questions