css - 与 CSS 网格居中对齐

Question

我有一个按钮class="view-more"，我试图在我的 div 内的页面上居中对齐，class="main"但我无法让它移动。

我已经尝试了 align-self、content 和 items 以及 justify 选项，但它只停留在 div 的左下角。

我认为我的职位可能会导致问题，但我不确定。我还在学习，那些让我失望。

这是完整的主要代码。

main {
  background-color: var(--secondary-color);
  height: 1060px;
}

main .videos {
  display: grid;
  grid-template-columns: 50% 50%;
  margin: 5px;
}

main .videos img {
  height: 240px;
  width: 92%;
  margin: 10px 0 0 24px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, .4);
  z-index: 100;
  position: relative;
}

main a {
  position: relative;
}

main .videos h4 {
  padding: 0;
  margin: 15px 0 0 0;
  color: var(--light-color);
  text-align: center;
  font-family: 'Oswald', sans-serif;
  font-size: 1.6em;
}

main .videos h4 span {
  background-color: rgba(0, 0, 0, 0.1);
  padding: 0 10px;
  border-radius: 10px;
}

main .videos i {
  position: absolute;
  color: white;
  z-index: 3;
  top: 30%;
  left: 40%;
  box-shadow: 0 4px 8px rgba(0, 0, 0, .8);
  border-radius: 100px;
}

main .view-more {
  position: absolute;
  border-radius: 10px;
  background-color: var(--dark-color);
  color: var(--hightlight-color);
}

<main>
    <h3>Featured Videos</h3>
    <div class="videos">
        <h4><span>Hands // Tobias Levin</span></h4>
        <h4><span>Rise // Virtuoso</span></h4>
        <a href="https://www.youtube.com/watch?v=kQLhO7dW5ZY" class="fresco"><i class="fas fa-play-circle fa-7x"></i><img src="/images/tobias1.jpg" alt=""></a>
        <a href="https://www.youtube.com/watch?v=S7kG641iA_g" class="fresco"><i class="fas fa-play-circle fa-7x"></i><img src="/images/rise.jpg" alt=""></a>
        <h4><span>This is Dan and Dave</span></h4>
        <h4><span>Super // Chris Webber</span></h4>
        <a href="https://www.youtube.com/watch?v=hBRkiXlW_kM" class="fresco"><i class="fas fa-play-circle fa-7x"></i><img src="/images/dand.jpg" alt=""></a>
        <a href="https://www.youtube.com/watch?v=Lyf_SsOThMs" class="fresco"><i class="fas fa-play-circle fa-7x"></i><img src="/images/cwebber.jpg" alt=""></a>
        <h4><span>Superhuman // Brian Tudor</span></h4>
        <h4><span>Smoke Screen // Jaspas Deck</span></h4>
        <a href="https://www.youtube.com/watch?v=qU0I8BnwoFk" class="fresco"><i class="fas fa-play-circle fa-7x"></i><img src="/images/bt.jpg" alt=""></a>
        <a href="https://www.youtube.com/watch?v=_Wk3imz44qI" class="fresco"><i class="fas fa-play-circle fa-7x"></i><img src="/images/smokescreen.jpg" alt=""></a>
    </div>
    <button class="view-more">Open The Vault</button>
</main>

标签： cssalignment

Answer 1

您介意主容器中的标题/所有内容是否居中？如果没有，您可以简单地将 text-align center 添加到容器中，以使孩子居中。您的代码不移动按钮的问题是因为您向按钮添加了“绝对位置”，这意味着它不会相对于其父级，而是相对于窗口居中。我删除了绝对位置，按钮现在将听其父级。那有意义吗？

main {
  background-color: var(--secondary-color);
  height: 1060px;
  text-align: center;
}

main .videos {
  display: grid;
  grid-template-columns: 50% 50%;
  margin: 5px;
}

main .videos img {
  height: 240px;
  width: 92%;
  margin: 10px 0 0 24px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, .4);
  z-index: 100;
  position: relative;
}

main a {
  position: relative;
}

main .videos h4 {
  padding: 0;
  margin: 15px 0 0 0;
  color: var(--light-color);
  text-align: center;
  font-family: 'Oswald', sans-serif;
  font-size: 1.6em;
}

main .videos h4 span {
  background-color: rgba(0, 0, 0, 0.1);
  padding: 0 10px;
  border-radius: 10px;
}

main .videos i {
  position: absolute;
  color: white;
  z-index: 3;
  top: 30%;
  left: 40%;
  box-shadow: 0 4px 8px rgba(0, 0, 0, .8);
  border-radius: 100px;
}

main .view-more {
  border-radius: 10px;
  background-color: var(--dark-color);
  color: var(--hightlight-color);
}

<main>
                <h3>Featured Videos</h3>
                <div class="videos">
                    <h4><span>Hands // Tobias Levin</span></h4>
                    <h4><span>Rise // Virtuoso</span></h4>
                    <a href="https://www.youtube.com/watch?v=kQLhO7dW5ZY" class="fresco"><i class="fas fa-play-circle fa-7x"></i><img src="/images/tobias1.jpg" alt=""></a>
                    <a href="https://www.youtube.com/watch?v=S7kG641iA_g" class="fresco"><i class="fas fa-play-circle fa-7x"></i><img src="/images/rise.jpg" alt=""></a>
                    <h4><span>This is Dan and Dave</span></h4>
                    <h4><span>Super // Chris Webber</span></h4>
                    <a href="https://www.youtube.com/watch?v=hBRkiXlW_kM" class="fresco"><i class="fas fa-play-circle fa-7x"></i><img src="/images/dand.jpg" alt=""></a>
                    <a href="https://www.youtube.com/watch?v=Lyf_SsOThMs" class="fresco"><i class="fas fa-play-circle fa-7x"></i><img src="/images/cwebber.jpg" alt=""></a>
                    <h4><span>Superhuman // Brian Tudor</span></h4>
                    <h4><span>Smoke Screen // Jaspas Deck</span></h4>
                    <a href="https://www.youtube.com/watch?v=qU0I8BnwoFk" class="fresco"><i class="fas fa-play-circle fa-7x"></i><img src="/images/bt.jpg" alt=""></a>
                    <a href="https://www.youtube.com/watch?v=_Wk3imz44qI" class="fresco"><i class="fas fa-play-circle fa-7x"></i><img src="/images/smokescreen.jpg" alt=""></a>
                </div>
                <button class="view-more">Open The Vault</button>
            </main>