Question

这是我目前的项目，我希望我的关闭按钮居中，目前它位于容器的右侧，我该如何让它居中？我正在使用bootstrap并且.text-center无法正常工作

 <!DOCTYPE html>
    <html lang="en">
    <head>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>

          <a class="color-yellow margin-top-20" data-target=".bs-example-modal-sm" data-toggle="modal" href="#"><u>Read Terms &amp; Conditions</u></a>
          <div aria-labelledby="mySmallModalLabel" class="modal wrap-modal fade bs-example-modal-sm" role="dialog" style="display: none;" tabindex="-1">
             <div class="modal-dialog modal-sm" role="document">
                <h1>HELLO WORLD</h1>
                <div class="modal-content">
                   <div class="modal-body">
                    <h4 class="modal-title text-left" id="mySmallModalLabel">Terms &amp; Conditions</h4>
                    <p>1. Hello</p>
                    <p>2. World</p>
                    <button aria-label="Close" class="close" data-dismiss="modal" type="button">close</button>
                   </div>   
                </div>
             </div>
          </div>

    </body>
    </html>

Answer 1

只需将div中的按钮包裹在text-center中，您也缺少该按钮的引导类。

          <div class="text-center">
            <button
              aria-label="Close"
              class="btn btn-primary close"
              data-dismiss="modal"
              type="button"
            >
              close
            </button>
          </div>

如何将按钮置于容器中心

1 个答案: