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 for同样的。

像：

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

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

2 个答案: