How to center two buttons together on a page

Question

I want to center two buttons to the center of a page. The following is my code. It centers only the btnExport at the center but not the btnReset, it always stays at the left. When I tried pull-right or pull-left at the row level both buttons correctly go to left or right!

<div class="row" style="padding-right: 18px; margin-left: auto; margin-right: auto">
  <div style="text-align: center">
    <asp:button SkinID="whiteButton" id="btnReset" runat="server" CausesValidation="false" Text="Reset" onclick="btnReset_Click"></asp:button>
    <span>&nbsp;</span>
    <asp:button SkinID="blueButton" id="btnExport" CausesValidation="false" runat="server" Text="Export"></asp:button>
    <input class="hidden" type="button" name="btnPrint" id="btnPrint" onClick="printDiv('divInvoiceGrid');" value="Print">
  </div>
</div>

Possible duplicate of [Horizontally center a div in a div](http://stackoverflow.com/questions/114543/horizontally-center-a-div-in-a-div) — Heretic Monkey, Aug 19 '16 at 16:41
your code seems to work as is https://jsfiddle.net/x9aaf1ge/ . If you are using bootstrap then I think the problem arises from there. — th1rdey3, Aug 19 '16 at 16:47
I always use a self-defined class for this: `.btn-row { width:100%;text-align:center }` — Drew Kennedy, Aug 19 '16 at 16:55

score 2 · Accepted Answer · answered Aug 19 '16 at 16:40

2

You could create a center class in your CSS and add it to the div that contains the two buttons.

.center {
   margin: auto;
   width: 50%;
   padding: 10px;
}

http://www.w3schools.com/css/css_align.asp

answered Aug 19 '16 at 16:40

Richard P

46
4

score 0 · Answer 2 · edited Aug 19 '16 at 16:52

Text-align center will just center the text, if I understand you want to center the buttons.

try using bootstrap col-xx and col-xx-offset.

<div class="row" style="padding-right: 18px; margin-left: auto; margin-right: auto">
   <div class="col-md-4 col-md-offset-4">
        <asp:button  SkinID="whiteButton" id="btnReset" runat="server" CausesValidation="false" Text="Reset" onclick="btnReset_Click"></asp:button>
        <span>&nbsp;</span>
        <asp:button SkinID="blueButton"  id="btnExport" CausesValidation="false" runat="server" Text="Export"></asp:button>
        <input class="hidden" type="button" name="btnPrint" id="btnPrint" onClick="printDiv('divInvoiceGrid');" value="Print">
   </div> 
</div>

score 0 · Answer 3 · answered Aug 19 '16 at 17:00

0

did u try ?

.row { display: flex; justify-content: center; align-items: center; }

It would be more helpful if you could pics with what u got and what u are trying to do.

answered Aug 19 '16 at 17:00

Mike Trinh

1,271
2
9
19

How to center two buttons together on a page

3 Answers3