css 如何将类按钮居中

siv3szwd 于 2023-06-07 发布在其他

关注(0)|答案(2)|浏览(224)

<!DOCTYPE html>
<html>

<head>
  <title>Flexbox Pricing Table</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Sono:wght@400;700&display=swap" rel="stylesheet">
  <style>
    body {
      font-family: 'Sono', sans-serif;
    }
.pricing-container{
 display:flex;
 height: 100vh;
 gap: 2rem;
 justify-content: center;
 align-items: center;
 padding :50px
}
.pricing-plan{
  background-color: #f2f2f2;
}

    /* Hint: What can you do with a media query and flexbox? */
    @media (max-width: 1250px) {
      
    }

    .plan-title{
      font-size: 24px;
      font-weight: bold;
      margin-bottom: 10px;
    text-align: center;
    }
    .plan-price{
      font-weight: bold;
      font-size: 48px;
    }
.plan-button{
  background-color: #ff6600;
border-radius: 10px;
border: none;
padding: 10px;
color: #fff;
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@QQ
}
.plan-features li {
      margin-bottom: 20px;
    }
  </style>
</head>

<body>
  <div class="pricing-container">
    <div class="pricing-plan">
      <div class="plan-title">Basic</div>
      <div class="plan-price">$9.99/month</div>
      <ul class="plan-features">
        <li>✅ 10GB Storage</li>
        <li>✅ 1 User</li>
        <li>🚫 Support</li>
      </ul>
      <button class="plan-button">Sign Up</a>
    </div>
    <div class="pricing-plan">
      <div class="plan-title">Standard</div>
      <div class="plan-price">$19.99/month</div>
      <ul class="plan-features">
        <li>✅ 50GB Storage</li>
        <li>✅ 5 Users</li>
        <li>✅ Phone &amp; Email Support</li>
      </ul>
      <button class="plan-button">Sign Up</a>
    </div>
    <div class="pricing-plan">
      <div class="plan-title">Premium</div>
      <div class="plan-price">$49.99/month</div>
      <ul class="plan-features">
        <li>✅ 100GB Storage</li>
        <li>✅ 10 Users</li>
        <li>✅ 24/7 Support</li>
      </ul>
      <button class="plan-button">Sign Up</a>
    </div>
  </div>

</body>

</html>

嗨，我试图中心注册按钮，但什么也没有发生，当我使用文本对齐或对齐中心，我该怎么做？我使用的参考代码没有代码行，有对齐命令，这是我的备忘录代码，有什么区别？注意：我确实在其他线程中发现了一些命令，如left%50，但它只是最糟糕的（只有一个注册按钮居中，其他的已经消失）

<!DOCTYPE html>
<html>

<head>
  <title>Flexbox Pricing Table</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Sono:wght@400;700&display=swap" rel="stylesheet">
  <style>
    body {
      font-family: 'Sono', sans-serif;
    }

    .pricing-container {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      gap: 2rem;
    }

    .pricing-plan {
      flex: 1;
      max-width: 400px;
      padding: 20px;
      background-color: #f2f2f2;
      border-radius: 5px;
      text-align: center;
    }

    .plan-title {
      font-size: 24px;
      font-weight: bold;
      margin-bottom: 10px;
    }

    .plan-price {
      font-size: 48px;
      font-weight: bold;
      margin-bottom: 10px;
    }

    .plan-features {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .plan-features li {
      margin-bottom: 20px;
    }

    .plan-button {
      padding: 10px;
      background-color: #ff6600;
      color: #fff;
      border-radius: 5px;
      border: none;
    }

    @media (max-width: 1250px) {
      .pricing-container {
        flex-direction: column;
        height: 100%;
      }
    }
  </style>
</head>

<body>
  <div class="pricing-container">
    <div class="pricing-plan">
      <div class="plan-title">Basic</div>
      <div class="plan-price">$11.99/month</div>
      <ul class="plan-features">
        <li>✅ 10GB Storage</li>
        <li>✅ 1 User</li>
        <li>🚫 Support</li>
      </ul>
      <button class="plan-button">Sign Up</a>
    </div>
    <div class="pricing-plan">
      <div class="plan-title">Standard</div>
      <div class="plan-price">$19.99/month</div>
      <ul class="plan-features">
        <li>✅ 50GB Storage</li>
        <li>✅ 5 Users</li>
        <li>✅ Phone &amp; Email Support</li>
      </ul>
      <button class="plan-button">Sign Up</a>
    </div>
    <div class="pricing-plan">
      <div class="plan-title">Premium</div>
      <div class="plan-price">$49.99/month</div>
      <ul class="plan-features">
        <li>✅ 100GB Storage</li>
        <li>✅ 10 Users</li>
        <li>✅ 24/7 Support</li>
      </ul>
      <button class="plan-button">Sign Up</a>
    </div>
  </div>

</body>

</html>

css

来源：https://stackoverflow.com/questions/76418410/how-to-center-a-class-button

2条答案

按热度按时间

fnatzsnv1#

1.您的按钮标签需要有一个关闭按钮标签。现在，它是：
<button class="plan-button">Sign Up</a>
但它应该是：

<button class="plan-button">Sign Up</button>

1.要使其居中，一种方法是使按钮成为块级元素，然后像这样使用自动边距：
display：block; margin：0 auto;
下面是你的代码的工作再现：

<!DOCTYPE html>
<html>

  <head>
    <title>Flexbox Pricing Table</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Sono:wght@400;700&display=swap" rel="stylesheet">
    <style>
      body {
        font-family: 'Sono', sans-serif;
      }

      .pricing-container {
        display: flex;
        height: 100vh;
        gap: 2rem;
        justify-content: center;
        align-items: center;
        padding: 50px
      }

      .pricing-plan {
        background-color: #f2f2f2;
      }

      /* Hint: What can you do with a media query and flexbox? */
      @media (max-width: 1250px) {}

      .plan-title {
        font-size: 24px;
        font-weight: bold;
        margin-bottom: 10px;
        text-align: center;
      }

      .plan-price {
        font-weight: bold;
        font-size: 48px;
      }

      .plan-button {
        background-color: #ff6600;
        border-radius: 10px;
        border: none;
        padding: 10px;
        color: #fff;
                display: block;
        margin: 0 auto;
      }

      .plan-features li {
        margin-bottom: 20px;
      }

    </style>
  </head>

  <body>
    <div class="pricing-container">
      <div class="pricing-plan">
        <div class="plan-title">Basic</div>
        <div class="plan-price">$9.99/month</div>
        <ul class="plan-features">
          <li>✅ 10GB Storage</li>
          <li>✅ 1 User</li>
          <li>🚫 Support</li>
        </ul>
        <button class="plan-button">Sign Up</button>
      </div>
      <div class="pricing-plan">
        <div class="plan-title">Standard</div>
        <div class="plan-price">$19.99/month</div>
        <ul class="plan-features">
          <li>✅ 50GB Storage</li>
          <li>✅ 5 Users</li>
          <li>✅ Phone &amp; Email Support</li>
        </ul>
        <button class="plan-button">Sign Up</button>
      </div>
      <div class="pricing-plan">
        <div class="plan-title">Premium</div>
        <div class="plan-price">$49.99/month</div>
        <ul class="plan-features">
          <li>✅ 100GB Storage</li>
          <li>✅ 10 Users</li>
          <li>✅ 24/7 Support</li>
        </ul>
                
        <button class="plan-button">Sign Up</button>
      </div>
    </div>

  </body>

</html>

赞(0）回复(0）举报 2023-06-07

cbjzeqam2#

只需在定价计划中添加display: flex; and flex-direction: column;
并将align-self: center;添加到按钮
注意：不要忘记将按钮的结束标记改为

<!DOCTYPE html>
<html>

<head>
  <title>Flexbox Pricing Table</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Sono:wght@400;700&display=swap" rel="stylesheet">
  <style>
    body {
      font-family: 'Sono', sans-serif;
    }
    
    .pricing-container {
      display: flex;
      height: 100vh;
      gap: 2rem;
      justify-content: center;
      align-items: center;
      padding: 50px
    }
    
    .pricing-plan {
      background-color: #f2f2f2;
      display: flex;
      flex-direction: column;
    }
    /* Hint: What can you do with a media query and flexbox? */
    
    @media (max-width: 1250px) {}
    
    .plan-title {
      font-size: 24px;
      font-weight: bold;
      margin-bottom: 10px;
      text-align: center;
    }
    
    .plan-price {
      font-weight: bold;
      font-size: 48px;
    }
    
    .plan-button {
      background-color: #ff6600;
      border-radius: 10px;
      border: none;
      padding: 10px;
      color: #fff;
      align-self: center
    }
    
    .plan-features li {
      margin-bottom: 20px;
    }
  </style>
</head>

<body>
  <div class="pricing-container">
    <div class="pricing-plan">
      <div class="plan-title">Basic</div>
      <div class="plan-price">$9.99/month</div>
      <ul class="plan-features">
        <li>✅ 10GB Storage</li>
        <li>✅ 1 User</li>
        <li>🚫 Support</li>
      </ul>
      <button class="plan-button">Sign Up</button>
    </div>
    <div class="pricing-plan">
      <div class="plan-title">Standard</div>
      <div class="plan-price">$19.99/month</div>
      <ul class="plan-features">
        <li>✅ 50GB Storage</li>
        <li>✅ 5 Users</li>
        <li>✅ Phone &amp; Email Support</li>
      </ul>
      <button class="plan-button">Sign Up</button>
    </div>
    <div class="pricing-plan">
      <div class="plan-title">Premium</div>
      <div class="plan-price">$49.99/month</div>
      <ul class="plan-features">
        <li>✅ 100GB Storage</li>
        <li>✅ 10 Users</li>
        <li>✅ 24/7 Support</li>
      </ul>
      <button class="plan-button">Sign Up</button>
    </div>
  </div>

</body>

</html>

赞(0）回复(0）举报 2023-06-07

我来回答

css 如何将类按钮居中

2条答案

相关问题

热门标签

最新问答