gpt4 book ai didi

html - 将 CSS 网格内的 div 居中

转载 作者:行者123 更新时间:2023-11-28 15:12:32 24 4
gpt4 key购买 nike

<分区>

我正在学习编写 HTML/CSS/JS,我正在创建一些模拟网站以边学边学。我开始涉足 CSS Grid,并努力将网格框中的元素水平和垂直居中对齐。我发现 Grid 在创建布局方面非常强大,但出于某种原因我无法理解这一部分。我想将标题中的 head-content-container 居中。

在做研究时我发现了THIS网站和THIS一。我看到他们建议使用 justify-self:center;并对齐 self :居中;但出于某种原因,我无法让它工作。可能我还有一个我不太明白的问题。 Here是我的 github 存储库的链接,下面是我的代码片段。预先感谢您能给我的任何帮助。

     <body>
<nav class="main-nav-wrapper">
<div class="nav-logo-wrapper">
<img class="nav-logo" src="img\T-Portfolio_Logo-02.svg" alt="Bolt Development Logo">
</div>
</nav>
<div class="grid-wrapper">
<header class="main-header">
<div class="head-content-container">
<h1>Bolt Development</h1>
</div>
</header>
</div>
</body>

编辑:忘记添加 HTML 片段。

.grid-wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 500px 500px 500px 500px 200px;
grid-template-areas: "head head head"
"main main main"
"portfolio_1 portfolio_2 portfolio_3"
"portfolio_4 portfolio_5 portfolio_6"
"footer footer footer";
}

.main-header {
grid-area: head;
background-image: url(https://placeimg.com/1000/800/tech);
background-size: cover;
grid-column: 1/4;
color: white;
}

.main-nav-wrapper {
display: grid;
grid-template-columns: repeat(8, 1fr);
height: 100px;
background-color: #191919;
}

.nav-logo-wrapper {
grid-column: 1/2;
padding: .5em;
max-height: 100%;
}

.nav-logo {
max-height: 100%;
}

.head-content-container {
grid-area: head;
align-self: center;
justify-self: center;
width: 50%;
}

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com