如何在html中水平对齐两个按钮

Question

我在我公司的网站上遇到了这个代码。我似乎无法弄清楚如何使用给定的代码浮动按钮。

<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.

任何帮助将不胜感激。非常感谢

Answer 1

您可以使用float向左或向右进行水平对齐，并使用margin进行集中使用，并在bootstrap中使用pull-left或“pull-right class”。

喜欢：

<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>

Answer 2

试试这个

<div class="center">

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

</div>

CSS

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