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是在父/容器元素上设置的东西;
margin: 0 auto方法对于具有给定宽度的非内联元素更有用;
设置明确的left和right只会在您position相应的情况下有效，但由于您设置了元素的左侧（而不是其中心），因此无法用于居中（）），我不建议采用中心方法。

您可能有兴趣查看的一些备选方案包括使用flexbox（但仅在您需要仅支持现代浏览器时）或使用表格显示（可能与按钮周围的一些其他容器元素结合使用）。

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

中心对齐按钮在页面上

2 个答案: