我怎么才能让我的按钮在中间对齐？

Question

我做了一些卡片，我想把按钮对中。唯一的问题是，无论我做什么，按钮都停留在起点。当我将按钮显示为弯曲或块时，它会扩展到全宽度。有人能帮我吗？H3确实在中间完美地对齐。我搞不懂为什么这个按钮就在同一个位置。

​

.index-cards .container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.index-cards .card {
  padding: 0;
  margin: 10px;
  border-radius: 10px;
}

.index-cards .card-image {
  height: 240px;
  background-size: cover;
  border-radius: 10px;
}

.index-cards .card-1 {
  background-image: url(https://via.placeholder.com/500&text=1);
}

.index-cards .card-2 {
  background-image: url(https://via.placeholder.com/500&text=2);
}

.index-cards .card-3 {
  background-image: url(https://via.placeholder.com/500&text=3);
}

.index-cards p {
  margin: 0 15px;
}

.index-cards h3,
.index-cards a {
  text-align: center;
}

<section class="index-cards my-150px">
  <div class="container">
    <div class="card">
      <div class="card-image card-1"></div>
      <h3 class="my-30px">Sportscholen</h3>
      <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aperiam, dignissimos! Autem fugit perspiciatis incidunt nulla expedita quaerat cupiditate neque iure!</p>
      <a href="#" class="btn my-30px">Sportschool zoeken</a>
    </div>

    <div class="card">
      <div class="card-image card-2"></div>
      <h3 class="my-30px">Nieuw bij FP30</h3>
      <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aperiam, dignissimos! Autem fugit perspiciatis incidunt nulla expedita quaerat cupiditate neque iure!</p>
      <a href="#" class="btn my-30px">Eerste keer</a>
    </div>

    <div class="card">
      <div class="card-image card-3"></div>
      <h3 class="my-30px">Contact</h3>
      <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aperiam, dignissimos! Autem fugit perspiciatis incidunt nulla expedita quaerat cupiditate neque iure!</p>
      <a href="#" class="btn my-30px">Contact opnemen</a>
    </div>
  </div>
</section>

​

Answer 1

我创建了一个新的类text-center，并将<a>封装在这个新的div中。标题是以中心位置而不是锚为中心的原因。因为标题是CSS，所以默认情况下应用display: block;并取全宽。

​

.index-cards .container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.index-cards .card {
  padding: 0;
  margin: 10px;
  border-radius: 10px;
}

.index-cards .card-image {
  height: 240px;
  background-size: cover;
  border-radius: 10px;
}

.index-cards .card-1 {
  background-image: url(https://via.placeholder.com/500&text=1);
}

.index-cards .card-2 {
  background-image: url(https://via.placeholder.com/500&text=2);
}

.index-cards .card-3 {
  background-image: url(https://via.placeholder.com/500&text=3);
}

.index-cards p {
  margin: 0 15px;
}

.index-cards h3,
.index-cards a {
  text-align: center;
}

.text-center{
text-align: center;
}

<section class="index-cards my-150px">
  <div class="container">
    <div class="card">
      <div class="card-image card-1"></div>
      <h3 class="my-30px">Sportscholen</h3>
      <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aperiam, dignissimos! Autem fugit perspiciatis incidunt nulla expedita quaerat cupiditate neque iure!</p>
      <div class="text-center"><a href="#" class="btn my-30px">Sportschool zoeken</a></div>
    </div>

    <div class="card">
      <div class="card-image card-2"></div>
      <h3 class="my-30px">Nieuw bij FP30</h3>
      <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aperiam, dignissimos! Autem fugit perspiciatis incidunt nulla expedita quaerat cupiditate neque iure!</p>
       <div class="text-center"><a href="#" class="btn my-30px">Eerste keer</a></div>
    </div>

    <div class="card">
      <div class="card-image card-3"></div>
      <h3 class="my-30px">Contact</h3>
      <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aperiam, dignissimos! Autem fugit perspiciatis incidunt nulla expedita quaerat cupiditate neque iure!</p>
       <div class="text-center"><a href="#" class="btn my-30px">Contact opnemen</a></div>
    </div>
  </div>
</section>

​

Answer 2

分别删除..index卡添加的

.index-cards h3,
.index-cards a {
    text-align: center;
}

添加以下内容：

.index-cards a {
        text-align: center;
        display: block;
    }