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:

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

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

CodePudding user response：

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

CodePudding user response：

You need only to convert the inline anchor tag to a block element. then you can use text-align.

.btn {
  display:block;
  text-align: center;  
}

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

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

Thank you. This helped:

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

CodePudding user response：

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

CodePudding user response：

.btn {
  display:flex;
  justify-content:center;
  align-items:center;
  border-radius: 1rem;
  transition: all 0.5s;
  font-family: 'Open Sans', sans-serif;
  font-weight: lighter;
  font-size: 16px;
  opacity: 85%;
  
  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"><span style='background-color:yellow'>Check Github</span></a>
    </div> 
</section> 

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

Did this, if this helps a little bit