带有 css 网格的按钮不会对齐

Question

我有一个非常简单的站点，其中包含 2 个按钮，我需要使用网格在站点底部对齐。 虽然 justify- 正常工作，但 align- 根本不起作用。 你能帮我解决这个问题吗？ 非常感谢！

我已经尝试将高度设置为容器以及 to.buttons 和.next-button，.back-button。 我试过 display: flex on.buttons and.next-button, .back-button too and the align- just doesn't work anyway.

这是我的 HTML 代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Shopping cart</title>
    <link rel="stylesheet" href="styles.css">



</head>
<body>
    <header>

    <div class="container">
    
        <div class="buttons">
        
            <a href='www.shopping.com' class="back-button">
            BACK</a>

            <a href='shopping-cart.php' class="next-button">
            NEXT</a>

        </div>
    </div>
    
    </header>

    <main>
    

    </main>

    <footer>

    <?php include "footer.php" ?>

    </footer>

    
</body>
</html>

这是我的 CSS：

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;   
}

a {
    text-decoration: none;
    color: white;
    }


.container {
    width: 75vw;
    margin: 0 auto;
}



/******* Header *******/

header {
    background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url("img/macbook.jpg");
    background-size: cover;
    height: 100vh;
    background-attachment: fixed;
    color: white;
    position: relative;
   
}


.buttons {
    padding: 1vw;
    display:grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    justify-self: center;
    align-self: end;
} 


.next-button, .back-button {
    border: 3px dotted rgba(97, 136, 150, 0.959);
    border-radius: 15px;
    background-color: rgba(0, 0, 0, 0.5);
    text-decoration: none;
    text-align: center;
    color: white;
    font-size: 15px;
    font-family: Arial;
    box-shadow: 12px 7px 12px rgba(128, 128, 128, 0.181);
    border-radius: 15px;
    background: linear-gradient(rgba(4, 65, 85, 0.2), #12688580);
}


.back-button:hover,
.next-button:hover,
.back-button:active,
.next-button:active {
transition: background 0.5s;
background: #6dc3e063;
}

Answer 1

我在你的容器中添加了高度和弹性

.container {
  width: 75vw;
  margin: 0 auto;
  height: 100%;
  display: flex;
}

还更新了 100% 宽度的按钮 class。

.buttons {
  padding: 1vw;
  display: grid;
  width: 100%;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  align-self: end;
}

这是 codepen https://codepen.io/ignasb/pen/BaPYQbp :-)