时间戳

首页 > 解决方案 > 如何对齐我的卡的按钮在中心？

html - 如何对齐我的卡的按钮在中心？

问题描述

我需要对齐卡片中心的“检查 Github”按钮。我试过了，item-align: center;但它不适用于这个元素。请告知如何解决此问题。谢谢。justify-content:center:margin-right: 50px;

这是我的 HTML 代码以及按钮代码的 CSS 部分：

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

标签： htmlcss

解决方案

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

推荐阅读