Question

我想将两个按钮居中到一个页面的中心。以下是我的代码。它仅以中心的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>

Answer 1

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

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

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

Answer 2

文字对齐中心只会让文字居中，如果我知道你想要按住中心。

尝试使用bootstrap 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>

Answer 3

你尝试过吗？

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

如果你可以用你所得到的和你想要的东西进行照片会更有帮助。

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

3 个答案: