0

I'm trying to center my button horizontally but I just can't seem to get it to work. I looked into it and it said that it can only center it if there is enough space, and when inspecting the elements with the chrome debugging tool there seems to be space so I'm not sure why it won't center.

There seems to be an issue when adding the code to SO, but it works fine on 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>
Riley Varga
  • 670
  • 1
  • 5
  • 15
  • `.purchase-btn: { margin: 0 auto; }` – ray Sep 22 '20 at 01:03
  • That worked! But why? – Riley Varga Sep 22 '20 at 01:10
  • 1
    The way buttons handle (or don't handle) css `display` rules is weird in a way that I think I used to understand, but ultimately the issue is that the button doesn't occupy the full width of its container. So setting it to display flex might have an effect on the _contents_ of the button but it's not going to affect the placement of the _button itself_. Setting horizontal margins to auto is a very common way to center elements that don't occupy the full available horizontal space. – ray Sep 22 '20 at 01:26

0 Answers0