0

我一直在编写一些代码，但是当我尝试使用该center属性时，它不得不将其自身扔到左侧。这是示例代码。<hr>aligncenter

body,
html {
  width: 100%;
  height: 100%;
  font-family: 'Montserrat', sans-serif;
  background: url(header.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

h1{
    font-size: 3rem;
    color: #e2dbdb;

}
hr{
    border-radius: 5px;
    max-width: 65px;
    align-items: center;
}
.buffer{
    padding: 5rem;
}
.btn-xl{
    padding: 0.7rem 0.8rem;
    /*border-radius: 5px;*/
}
<body>
  <div class="container d-flex align-items-center h-100 ">
    <div class="row">
      <header class="text-center col-12">
        <h1>THE BEST START UP OF THE YEAR</h1>
      </header>
      <div class="col-12 buffer"></div>
      <section class="text-center col-12">

        <hr class="border border-primary">

        <button class="btn btn-primary btn-xl">FIND OUT MORE</button>
      </section>

    </div>
  </div>

</body>

但是当我把它放在center标签里时，它突然居中

body,
html {
  width: 100%;
  height: 100%;
  font-family: 'Montserrat', sans-serif;
  background: url(header.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

h1 {
  font-size: 3rem;
  color: #e2dbdb;
}

hr {
  border-radius: 5px;
  max-width: 65px;
  align-items: center;
}

.buffer {
  padding: 5rem;
}

.btn-xl {
  padding: 0.7rem 0.8rem;
  /*border-radius: 5px;*/
}
<body>
  <div class="container d-flex align-items-center h-100 ">
    <div class="row">
      <header class="text-center col-12">
        <h1>THE BEST START UP OF THE YEAR</h1>
      </header>
      <div class="col-12 buffer"></div>
      <section class="text-center col-12">
        <center>
          <hr class="border border-primary">
        </center>

        <button class="btn btn-primary btn-xl">FIND OUT MORE</button>
      </section>

    </div>
  </div>

</body>

那么为什么不对齐工作<hr>

4

0 回答 0