Question

我正在学习编写HTML / CSS / JS，我正在创建一些模拟网站，以便随时学习。我开始冒险进入CSS Grid，并且正在努力使水平和垂直对齐在网格框内的项目。我发现Grid在创建布局方面非常强大，出于某种原因我无法理解这一部分。我想将head-content-container置于标题中心。

在进行研究时，我找到了THIS网站和THIS网站。我看到他们建议使用自我辩解：中心;并且对齐 - 自我：中心;但由于某种原因，我无法让它发挥作用。我可能有另一个我不太了解的问题。 Here是我的github repo的链接，下面是我的代码片段。提前感谢您提供给我的任何帮助。

     <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%;
}

Answer 1

我能够找出自己的问题。我最终设置了标题以显示flex并对齐内容。

.main-header {
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url(https://placeimg.com/1000/800/tech);
    background-size: cover;
    grid-column: 1/4;
    color: white;
}

Answer 2

您可以使用margin auto并将text-align设置为center，如下所示。我还添加了一个更新的代码段。顺便说一句，除非你出于其他原因使用它们，否则你不需要自我辩护和自我对齐。

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

.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%;
    margin: auto;
    text-align: center;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<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>

Answer 3

您可以将代码更改为：

.head-content-container {
    grid-area: head;
    **text-align: center;**
}

或者如果你真的想要给出50％的宽度，你也可以添加margin: 0 auto。希望这有帮助！

将div放在CSS网格内部

3 个答案: