CODEWITHSUNDEEP
cssbuttonpositionalignment
Ondřej Severa
Ondřej Severa

Reputation: 379

Align buttons two in center one the right

I have three buttons Start, Abort and Close. Can you tell me how can I alight Start and Abort button exactly to the center of the DIV and close button to the right side. When I use float:right the Start and Abort button aligns to the center of the rest space :(

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

Upvotes: 4

Views: 8865

Answers (1)

tb11
tb11

Reputation: 3106

You can use position:absolute to make sure the Close button doesn't interfere with centering.

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

Fiddle: http://jsfiddle.net/zc7m5/1/

Upvotes: 11

Related Questions