How can i get my button to align in the center?-CodePudding

I made some cards and i want to center the button. The only thing is, whatever I do the button stays at the start. And when i display the button as a flex or a block, it expands to full width. Can someone help me out? The H3 does perfectly align in the center. I can't figure out why the button stays at exactly the same spot.

.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 >
  <div >
    <div >
      <div ></div>
      <h3 >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="#" >Sportschool zoeken</a>
    </div>

    <div >
      <div ></div>
      <h3 >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="#" >Eerste keer</a>
    </div>

    <div >
      <div ></div>
      <h3 >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="#" >Contact opnemen</a>
    </div>
  </div>
</section>

CodePudding user response：

I created a new class text-center and wrapped the <a> inside this new div. The reason the heading was centering but not the anchor. Because on heading is CSS display: block; is applied by default and taking the full width.

.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 >
  <div >
    <div >
      <div ></div>
      <h3 >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 ><a href="#" >Sportschool zoeken</a></div>
    </div>

    <div >
      <div ></div>
      <h3 >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 ><a href="#" >Eerste keer</a></div>
    </div>

    <div >
      <div ></div>
      <h3 >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 ><a href="#" >Contact opnemen</a></div>
    </div>
  </div>
</section>

CodePudding user response：

Remove the .index-cards a add separately

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

Add This:

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