如何使用自舉將按鈕對准中心？

Question

所以我的圖片是全屏的（頁腳除外），我的按鈕在中間。 一切正常，我的按鈕在中間，但是現在我開始使用引導程序並更改了按鈕，我的按鈕一直移到屏幕的左側，而不是中心在中間...有人嗎？解決方案？

注意：我嘗試做

 <div class="wrapper text-center">

仍然無法正常工作。

這是我拍攝的屏幕截圖： https : //gyazo.com/ce68d7b118156371ad02e7aa2a33ec2a

  <!DOCTYPE html>
    <html>
    <head>


        <title>
        project
        </title>
    <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="../css/main.css">
    </head>


    <body>




    <div class="wrapper">
            <button type="button" class="btn btn-primary">Login with Facebook</button>
        </div>

        <div class="footer"></div>

      <div class="download">Download</div>

    </body>
    </html>

然后...

    html,body{
      height:100%;
      width:100%;
      }
    .wrapper {
               display:flex;
               align-items:center; 
               width:100%;
               height:100%;
               background-image: url("../img/space.jpg");
               background-repeat:no-repeat;
               background-size:cover;

         }

        .button {
          width:100px;
          margin:auto;
        }

        .footer {

    padding-top: 200px;

        }

        .download {
          float: top;
        }

Answer 1

添加justify-content: center; 到.wrapper

 html, body { height: 100%; width: 100%; } .wrapper { display: flex; align-items: center; width: 100%; height: 100%; background-image: url("../img/space.jpg"); background-repeat: no-repeat; background-size: cover; justify-content: center; } .button { width: 100px; margin: auto; } .footer { padding-top: 200px; } .download { float: top; }

 <!DOCTYPE html> <html> <head> <title> project </title> <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="../css/main.css"> </head> <body> <div class="wrapper"> <button type="button" class="btn btn-primary">Login with Facebook</button> </div> <div class="footer"></div> <div class="download">Download</div> </body> </html>

Answer 2

您可以使用margin:0 auto;來簡單地做到這一點margin:0 auto;

.btn {
  margin:0 auto;
}

 html, body { height: 100%; width: 100%; } .wrapper { display: flex; align-items: center; width: 100%; height: 100%; background-image: url("../img/space.jpg"); background-repeat: no-repeat; background-size: cover; } .button { width: 100px; margin: 0 sauto; } .btn { margin:0 auto; } .footer { padding-top: 200px; }

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <div class="wrapper"> <button type="button" class="btn btn-primary">Login with Facebook</button> </div> <div class="footer"></div> <div class="download">Download</div>

如何使用自舉將按鈕對准中心？

問題描述

2 個解決方案

解決方案1
1 2017-01-16 04:18:41

解決方案2
0 2017-01-16 04:23:05

如何使用自舉將按鈕對准中心？

問題描述

2 個解決方案

解決方案1 1 2017-01-16 04:18:41

解決方案2 0 2017-01-16 04:23:05

解決方案1
1 2017-01-16 04:18:41

解決方案2
0 2017-01-16 04:23:05