使用CSS Grid对齐div盒的问题

Question

我想使用Grid和Hero图像为我的博客构建自定义WordPress。

这是我的HTML：

<div class="site-wrapper"> 

     <div class="section site-menu">MenuItem 1 | MenuItem 2 | MenuItem 3 | MenuItem 4</div> 

    <div class="section site-header"> 
    <div class="hero"> 
     <div class="hero-content"> 
     <h1>If you can dream it, you can do it...</h1> 
     <p class="subhead">lets do it !</p> 
     </div> 
     <div class="bottom-right">This text should be positioned at the bottom right of the Hero Image</div> 
    </div> 
    </div>    

     <div class="section undefined"> 
      <div class="undefined-content"> 
       undefined 
      </div> 
     </div> 

     <div class="section site-footer">Footer</div> 

    </div> 

这是CSS代码：

* { 
    box-sizing: border-box; 
} 

body { 
    margin: 0; 
    padding: 0; 
} 

.site-wrapper { 
    display: grid; 
    grid-template-columns: 1fr; 
} 

.site-menu { 
    background-color:#000; 
    color:#fff; 
    position: absolute; 
    padding: 8px 20px 9px; 
    width: 100vw; 
} 

.hero { 
    background-image: url('https://wallpaperbrowse.com/media/images/landscape-mountains-nature-clouds.jpg'); 
    background-size:cover; 
    background-position: center; 
    width: 100wh; 
    height: 100vh; 
    display: flex; 
} 

.hero-content { 
    background-color:#000; 
    color:#fff; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    text-align: center; 
    flex-directon: column; 
    margin: auto; 
} 

我还创建了一个codepen它。

我有多个问题：

1. 我的菜单是不是我的形象宽。

2. 我的文字在中间并没有对齐我的英雄形象的中心，h1和<p class="subhead">并排而不是彼此之间。

3. <div class="bottom-right">不可见！我想把它放在图像的右下角，它应该在上面。

Answer 1

我附上了一个codepen以及我的更改。

* { 
    box-sizing: border-box; 
} 

body { 
    margin: 0; 
    padding: 0; 
} 

.site-wrapper { 
    position: relative; 
    display: grid; 
    grid-template-columns: 1fr; 
} 

.site-menu { 
    background-color:#000; 
    color:#fff; 
    position: absolute; 
    padding: 8px 20px 9px; 
    width: 100%; 
    z-index: 1; 
} 

.hero { 
    background-image: url('https://wallpaperbrowse.com/media/images/landscape-mountains-nature-clouds.jpg'); 
    background-size:cover; 
    background-position: center; 
    width: 100wh; 
    height: 100vh; 
    display: flex; 
} 

.hero-content { 
    background-color:#000; 
    color:#fff; 
    display: block; 
    align-items: center; 
    justify-content: center; 
    text-align: center; 
    flex-directon: column; 
    margin: auto; 
} 

.bottom-right { 
    position: absolute; 
    right: 0; 
    margin-top: -1.2em; 
    background: black; 
    color: white; 
} 

https://codepen.io/bartholomewdavid/pen/Xedjow

1）当使用100vw的宽度它可能会导致问题。原因是因为它占了包含滚动条的视口的100％。所以1宽度的滚动条被添加。我将它切换到100％

2）将内容置于Flexbox中并不适用于某些原因。 第一个是有两件事是水平居中给它的抵消外观。

我将.bottom-left组件移出其父组件，并将其垂直偏移一点以显示在背景图片的顶部。

最后一件事是在子标题旁出现居中的文字。为了解决这个问题，我只是删除了显示：flex就可以了。

Answer 2

更改如下代码：

* { 
    box-sizing: border-box; 
} 

body { 
    margin: 0; 
    padding: 0; 
} 

.site-wrapper { 
    display: grid; 
    grid-template-columns: 1fr; 
} 

.site-menu { 
    background-color:#000; 
    color:#fff; 
    position: absolute; 
    padding: 8px 20px 9px; 
    width: 100%; 
} 

.hero { 
    background-image: url('https://wallpaperbrowse.com/media/images/landscape-mountains-nature-clouds.jpg'); 
    background-size:cover; 
    background-position: center; 
    width: 100wh; 
    height: 100vh; 
    display: flex; 
} 

.hero-content { 
    background-color:#000; 
    color:#fff; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    text-align: center; 
    flex-direction: column; 
    margin: auto; 
} 

.bottom-right { 
    position: absolute; 
    bottom: 0; 
    right: 0; 
}