如何將我的卡的按鈕居中對齊？[復制]-有解無憂

這個問題在這里已經有了答案：如何在 div 塊內居中文本（水平和垂直）？ (27 個回答) 7 小時前關閉。

我需要在卡的中心對齊“檢查 Github”按鈕。我試著item-align: center;和justify-content:center:和margin-right: 50px;，但它沒有這個元素上作業。請告知如何解決此問題。謝謝。

這是我的 HTML 代碼以及按鈕代碼的 CSS 部分：

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

uj5u.com熱心網友回復：

你應該把它添加到你的“.btn”類中，我相信這會解決你的問題。

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

如果頂部選項不起作用，請嘗試：

.btn {
  text-align: center;
}

uj5u.com熱心網友回復：

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

你的 CSS

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

uj5u.com熱心網友回復：

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

這樣做了，如果這有幫助的話

uj5u.com熱心網友回復：

謝謝你。這有助于：

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

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/355510.html

標籤：html css

上一篇：SVG–:hover和鏈接無法與剪輯路徑和Firefox結合使用

下一篇：在工具按鈕后啟用懸停顏色