如何将两个按钮居中放在一个页面上

问题描述：

我想将两个按钮放在页面的中央。以下是我的代码。它只以中心的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>

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

可能重复[在div中水平居中div]（http://stackoverflow.com/questions/114543/horizontally-center-a-div-in- a-div） –

试过了，没有帮助！ – Massey

答

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

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

答

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

尝试使用引导程序col-xx和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>

这也行得通！ – Massey

答

你试过吗？

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

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

如何将两个按钮居中放在一个页面上

相关推荐