2016-08-19 124 views
0

我想将两个按钮放在页面的中央。以下是我的代码。它只以中心的btnExport为中心,但不以btnReset为中心,它始终停留在左边。当我在排列级尝试右拉或左拉时,两个按钮都正确地向左或向右移动!如何将两个按钮居中放在一个页面上

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

尝试添加'显示:块'到该div样式 – techspider

+0

可能重复[在div中水平居中div](http://stackoverflow.com/questions/114543/horizo​​ntally-center-a-div-in- a-div) –

+0

试过了,没有帮助! – Massey

回答

2

您可以在您的CSS中创建一个中心类,并将其添加到包含两个按钮的div。

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

0

文本对齐中心将只是居中文本,如果我理解你想中心的按钮。

尝试使用引导程序col-xxcol-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> 
+1

这也行得通! – Massey

0

你试过吗?

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

如果你可以拍照你得到了什么以及你想做什么,那将会更有帮助。