时间戳

首页 > 解决方案 > 为什么使用 justify-content: center 时我的按钮不居中

html - 为什么使用 justify-content: center 时我的按钮不居中

问题描述

我试图将我的按钮水平居中，但我似乎无法让它工作。我查看了它，它说只有在有足够空间的情况下才能将其居中，并且在使用 chrome 调试工具检查元素时似乎有空间，所以我不确定为什么它不会居中。

将代码添加到 SO 时似乎存在问题，但在 CodePen 上运行良好https://codepen.io/Astralius/pen/RwaqEzN

body {
    background: #252525 !important;
}

/* Parent div */
/* In order to be able to position something "absolute" to it's parents position */
/* the parent can't be "static" */
.price-card {
    border-radius: 25px;
    background: #f1f1f1;
    width: 350px;
    height: 550px;
    margin-left: 50px;
    margin-top: 50px;

    /* the Position property is "static" by default */
    /* in order to allow child elements to position abolute to it's parent */
    /* it can't be static */
    position: relative;
}

.top-div {
    border-radius: 15px 15px 0 0;
    background: #FBF1EF;
    width: 100%;
    height: 35%;

    display: flex;
    justify-content: center;
    /* align horizontal */
    align-items: center;
    /* align vertical */
    flex-direction: column;
    /* Sets the direction of the elements */
}

.top-div h1 {
    color: #56D77A;
    font-family: 'Oswald';
    line-height: 30px;
    font-size: 3rem;
}

.top-div p {
    color: #252525;
    font-weight: 600;
    opacity: .4;
}

.bottom-div {
    border-radius: 0 0 25px 25px;
    /* background: #BCE484; */
    background-image: linear-gradient(180deg, #cdf891, #5BE284);
    width: 100%;
    height: 65%;

    /* what */
    /* absolute to the parents position */
    position: absolute;
    bottom: 0;
}

.bottom-div h2 {
    color: #FFF;
    font-family: 'Oswald';
    line-height: 30px;
    font-size: 1.5rem;
    text-transform: uppercase;
    display: flex;
    justify-content: center;
    margin-top: 20px;
    margin-bottom: 20px;
}

.bottom-div ul li {
    margin-left: 50px;
    margin-bottom: .5rem;
    color: #FFF;
}

.bottom-div .text-muted {
    opacity: 0.6;
    /* Override the default Bootstrap style */
    color: #FFF !important;
}

.purchase-btn {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    display: flex;
    justify-content: center;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Price Table</title>

  <link rel="stylesheet" href="./Resources/style.css">

  <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"
    integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />

  <!-- Bootstrap Begin -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
    integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
  </script>
  <!-- Bootstrap End -->

  <!-- Custom Font Start -->
  <link href="https://fonts.googleapis.com/css2?family=Oswald:wght@500&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Baloo+Tammudu+2:wght@600&display=swap" rel="stylesheet">
  <!-- Custom Font End -->

</head>

<body>
  <div class="price-card">

    <div class="top-div">
      <h1>$26</h1>
      <p>Per month</p>
    </div>
    
    <div class="bottom-div">
      <h2>Basic</h2>
      <ul class="fa-ul">
        <li><span class="fa-li"><i class="fas fa-check"></i></span>Single User</li>
        <li><span class="fa-li"><i class="fas fa-check"></i></span>5GB Storage</li>
        <li><span class="fa-li"><i class="fas fa-check"></i></span>Unlimited Public Projects</li>
        <li><span class="fa-li"><i class="fas fa-check"></i></span>Community Access</li>
        <li class="text-muted "><span class="fa-li"><i class="fas fa-times"></i></span>Unlimited Private Projects</li>
        <li class="text-muted"><span class="fa-li"><i class="fas fa-times"></i></span>Dedicated Phone Support</li>
      </ul>
      <button class="purchase-btn">Text</button>
    </div>
  </div>
</body>

</html>

标签： htmlcssflexbox

解决方案

推荐阅读