将两个按钮居中对齐一个右侧

Posted 2023-03-05

【中文标题】将两个按钮居中对齐一个右侧

【英文标题】：Align buttons two in center one the right

【发布时间】：2013-08-07 01:58:36

【问题描述】：

我有三个按钮开始、中止和关闭。你能告诉我如何将 Start 和 Abort 按钮准确地放在 DIV 的中心，然后将关闭按钮放在右侧。当我使用float:right 时，开始和中止按钮与剩余空间的中心对齐:(

<div style="text-align: center; width: 100%; border-width: 1px 0 0 0; ">
                    <button id="btn-continue-top-fill">Start</button>
                    <button id="btn-cancel-top-fill">Abort</button>                    
                    <button id="btn-close-top-fill" style="float: right;">Close</button>
</div>

【参考方案1】：

您可以使用position:absolute 确保关闭按钮不会干扰居中。

<div style="text-align: center; position:relative; width: 100%; border-width: 1px 0 0 0; ">
    <button id="btn-continue-top-fill">Start</button>
    <button id="btn-cancel-top-fill">Abort</button>                    
    <button id="btn-close-top-fill" style="position: absolute; right: 0;">Close</button>
</div>

小提琴：http://jsfiddle.net/zc7m5/1/

【讨论】：

我认为有一些简单的解决方案。谢谢！