页面居中对齐按钮

Question

这个问题似乎很常见，但我在正确解决问题时遇到了问题。我有 3 个按钮。我已经使用 float: left; 和 float: right; 将其中的两个左右对齐。我的问题是如何将第 3 个按钮对齐到中心（在页面上）？

我尝试了text-align: center;、margin: 0 auto;、left:0; right: 0;但没有成功。

Answer 1

您需要在父元素上设置text-align: center;。

#a { float: left; }
#c { float: right; }
#parent { text-align: center; }

<div id="parent">
  <button id="a">A</button>
  <button id="b">B</button>
  <button id="c">C</button>
</div>

您尝试过的解决方案效果不佳的原因：

如上所述，text-align 是要在 parent/container 元素上设置的内容；
margin: 0 auto 方法对于给定宽度的非内联元素更有用；
设置显式 left 和 right 仅当您相应地 position 它们时才有效，但用于居中会很麻烦，因为您设置了元素的左侧（而不是它的中心点），我不推荐这种居中方法。

您可能有兴趣查看的一些替代方案包括使用 flexbox（但前提是您只需要支持现代浏览器），或使用 table 显示（可能与一些额外的容器结合使用按钮周围的元素）。

Answer 2

<!-- html markup -->

    <div class="btn_wrap">
    <a class="btn_left">button1</a>
    <a class="btn_right">button2</a>
    <a class="btn_center">button3</a>
    </div>

/*    stylesheets */

    .btn_wrap{
    text-align:center;
    }
    .btn_left{ float:left;}
    .btn_right{ float:right;}

页面居中对齐按钮

center align button on page

html

css