Question

所以我的图像是全屏的（页脚除外）而我的按钮位于中间。它工作得很好，我的按钮在中心，但现在我已经开始使用bootstrap并更改了我的按钮，我的按钮一直移动到屏幕的左边而不是中心...有没有人有任何溶液

注意：我尝试过做

 <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

＆＃13;

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;
}

＆＃13;

<!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>

＆＃13;

Answer 2

您只需使用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 个答案: