我怎样才能让我的按钮在中心对齐？

Question

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

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

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