Question

我一直在阅读其他人发布的类似问题，但没有一个能够解决我的问题，尽管我一直在尝试建议的解决方案。所以，我决定问他一个问题。我有六个按钮代表六个部门，我希望它能并排放置两个按钮。现在我设法做到了，但按钮并不想到达页面的中心。这是我的源代码。

＆＃13;

    <script src="assets/js/jquery-1.10.2.js"></script>
    <script src="assets/js/bootstrap.min.js"></script>
    <script src="assets/js/jquery.metisMenu.js"></script>
    <script src="assets/js/custom.js"></script>

＆＃13;

 body{
  font-family: 'Montserrat', sans-serif;
  margin:0;
  background-image: url("background.jpg ");

}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex-wrap: wrap;
  width: 80vw;
  margin: 0 auto;
  min-height: 100vh;
}
.btn {
  flex: 1 1 auto;
  margin: 10px;
  padding: 30px;
  float: left;
  text-align: center;
  text-transform: uppercase;
  transition: 0.2s;
  background-size: 200% auto;
  color: black;
  
 
 /* text-shadow: 0px 0px 10px rgba(0,0,0,0.2);*/
  box-shadow: 0 0 0px #eee;
  border-radius: 30px;
 }

/* Demo Stuff End -> */

/* <- Magic Stuff Start */

.btn:hover {
  background-position: right center; /* change the direction of the change here */
}

.btn-1 {
  background-image: linear-gradient(to right, #f6d365 0%, #fda085 51%, #f6d365 100%);
}

.btn-2 {
  background-image: linear-gradient(to right, #fbc2eb 0%, #a6c1ee 51%, #fbc2eb 100%);
}

.btn-3 {
  background-image: linear-gradient(to right, #84fab0 0%, #1aff1a 51%, #84fab0 100%);
}

.btn-4 {
  background-image: linear-gradient(to right, #a1c4fd 0%, #d147a3 51%, #a1c4fd 100%);
}

.btn-5 {
  background-image: linear-gradient(to right, #ffecd2 0%, #ff1a75 51%, #ffecd2 100%);
}

.btn-6 {
  background-image: linear-gradient(to right, #f6d365 0%, #fda085 51%, #f6d365 100%);
}

＆＃13;

<div class="main-panel">

  <center>
<h1> Good Services Delivery</h1></center>
  <br />
  <br />
  <center>
<div>
  <a class="btn btn-1">Arrival & Emergency</a>
  <a class="btn btn-2">Obstetric & Gynecology</a>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <a class="btn btn-3">WAD</a>
  <a class="btn btn-4">Ortopedik & Medikal </a>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <a class="btn btn-5">Pediatrik</a>
  <a class="btn btn-6">Mortuary</a>
</div>
  </center>
</div>
</body>

＆＃13;

这就是我的index.php现在的样子

那么，我该怎么做才能让我的按钮位于中心？

Answer 1

您可以利用.main-panel的父{<1}}元素的 Flexbox 来水平居中，摆脱不必要的{{1标记以及已弃用的body元素，并在br标记的center div上应用column-count: 3;。

＆＃13;

.parent

＆＃13;

Answer 2

第一件事是html 5不支持中心标签。您可以使用boostrap轻松完成此操作。

完整代码，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
!-- language: lang-css -->

     body{
      font-family: 'Montserrat', sans-serif;
      margin:0;
      background-image: url("background.jpg ");

    }
    .btn {
      flex: 1 1 auto;
      margin: 10px;
      padding: 30px;
      float: left;
      text-align: center;
      text-transform: uppercase;
      transition: 0.2s;
      background-size: 200% auto;
      color: black;


     /* text-shadow: 0px 0px 10px rgba(0,0,0,0.2);*/
      box-shadow: 0 0 0px #eee;
      border-radius: 30px;
     }

    /* Demo Stuff End -> */

    /* <- Magic Stuff Start */

    .btn:hover {
      background-position: right center; /* change the direction of the change here */
    }

    .btn-1 {
      background-image: linear-gradient(to right, #f6d365 0%, #fda085 51%, #f6d365 100%);
    }

    .btn-2 {
      background-image: linear-gradient(to right, #fbc2eb 0%, #a6c1ee 51%, #fbc2eb 100%);
    }

    .btn-3 {
      background-image: linear-gradient(to right, #84fab0 0%, #1aff1a 51%, #84fab0 100%);
    }

    .btn-4 {
      background-image: linear-gradient(to right, #a1c4fd 0%, #d147a3 51%, #a1c4fd 100%);
    }

    .btn-5 {
      background-image: linear-gradient(to right, #ffecd2 0%, #ff1a75 51%, #ffecd2 100%);
    }

    .btn-6 {
      background-image: linear-gradient(to right, #f6d365 0%, #fda085 51%, #f6d365 100%);
    }  

    .main-panel{
        text-align: center;
    } 
</style>
</head>

<body>




<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->



    <div class="main-panel">

      <h1> Good Services Delivery</h1>

      <br /><br />

         <div class="container-fluid">
                             <div class="row col-md-offset-3">              
                             <a class="btn btn-1 col-md-4">Arrival & Emergency</a>
                             <a class="btn btn-2 col-md-4">Obstetric & Gynecology</a>
                             </div>

                             <div class="row col-md-offset-3">
                             <a class="btn btn-3 col-md-4">WAD</a>
                             <a class="btn btn-4 col-md-4">Ortopedik & Medikal </a>
                             </div>

                             <div class="row col-md-offset-3">
                             <a class="btn btn-5 col-md-4">Pediatrik</a>
                             <a class="btn btn-6 col-md-4">Mortuary</a>
                            </div>

        </div>

    </div>


</body>
</html>

使用css

2 个答案: