将按钮对齐在右侧中间的两个按钮

时间:2013-08-06 07:09:30

标签: css button position alignment

我有三个按钮Start,Abort和Close。你能告诉我怎样才能将开始和中止按钮精确地点到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 个答案:

答案 0 :(得分:8)

您可以使用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/