CODEWITHSUNDEEP
htmlcssasp.net
Massey
Massey

Reputation: 1125

How to center two buttons together on a page

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>

Upvotes: 0

Views: 1895

Answers (3)

Mike Trinh
Mike Trinh

Reputation: 1303

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.

Upvotes: 0

John Doe
John Doe

Reputation: 3233

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>

Upvotes: 0

Richard P
Richard P

Reputation: 46

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

Upvotes: 2

Related Questions