How to align button of my card in the center?

Question

I need to align "Check Github" button in the center of the card. I tried item-align: center; and justify-content:center: and margin-right: 50px; but it does not work on this element. Please advise how to resolve this issue. Thanks.

This is my HTML code along with CSS part of the code for the button:

.btn {
  border-radius: 1rem;
  transition: all 0.5s;
  font-family: 'Open Sans', sans-serif;
  font-weight: lighter;
  font-size: 16px;
  opacity: 85%;
  background-color: #ffc229;
  padding: 1rem 0.3rem;
  margin-bottom: 10px;
  margin-top: 10px;
 }

<section>
     <div class="flex">
        <div class="col">

          <a href="#">
            <img src="pac_man.jpg" width="" height="" alt="Pac-Men">
          </a>

          <h3>Pac-Men</h3>
          <p>Create as many or as little Pac-Men as you like and see them bouncing
            around!</p>
          <p> Try it with the <a href="https://raw.githack.com/mayazhl/PacMen_Factory/main/index.html"
              target="_blank">live demo.</p>

          <a class="btn" href="https://github.com/mayazhl/PacMen_Factory">Check Github</a>
    </div> 
</section>

Are you using Bootstrap? If so, tag the question with it and the version — j08691, Nov 10 '21 at 17:46
You are missing the closing tag for `
`, but please answer first comment. — Rob Moll, Nov 10 '21 at 17:54
Questions seeking code help must include the shortest code necessary to reproduce it **in the question itself** preferably in a [**Stack Snippet**](https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/). See [**How to create a Minimal, Reproducible Example**](http://stackoverflow.com/help/reprex) — Paulie_D, Nov 10 '21 at 18:00

score 0 · Answer 1 · edited Jan 31 '22 at 11:25

Your Html

<section>
     <div class="flex">
        <div class="col">
          <a href="#">
            <img src="pac_man.jpg" width="" height="" alt="Pac-Men">
          </a>
          <h3>Pac-Men</h3>
          <p>Create as many or as little Pac-Men as you like and see them bouncing
            around!</p>
          <p> Try it with the <a href="https://raw.githack.com/mayazhl/PacMen_Factory/main/index.html"
              target="_blank">live demo.</p>
          <div class="btn">
            <a class="" href="https://github.com/mayazhl/PacMen_Factory">Check Github</a>
          </div>
    </div> 
</section>

Your Css

.flex {
        display: flex;
        width: 100vw;
    }
    .col{
        width:100%;
    }
    .btn{
        text-align: center;
    }

score -1 · Answer 2 · answered Nov 10 '21 at 18:02

-1

You should add this to your ".btn" class and I am sure that will fix your problem.

.btn {
  display: flex;
  justify-content: center;
}

If the top option doesn't work try:

.btn {
  text-align: center;
}

answered Nov 10 '21 at 18:02

Eldar Dautović

1

How to align button of my card in the center?

2 Answers2