将 div 框与 CSS Grid 对齐的问题答案

【问题标题】：Problems aligning div boxes with CSS Grid将 div 框与 CSS Grid 对齐的问题
【发布时间】：2017-09-20 06:52:03
【问题描述】：

我想使用 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。

我有多个问题：

我的菜单比我的图片宽。
我在中间的文字没有与我的英雄图像的中心对齐，h1 和 <p class="subhead"> 是并排的，而不是彼此之间。
<div class="bottom-right"> 不可见！我想把它放在图片的右下角，它应该在上面。

【问题讨论】：

由于您的代码使用 CSS Grid 而不是 Flexbox，因此我相应地编辑了您的文本。

标签： html wordpress css css-grid

【解决方案1】：

我在下面附上了一个带有我的更改的代码笔。

* {
    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 组件从其父组件中移出，并将其垂直偏移了一点，以显示在背景图像的顶部。

最后是出现在子标题旁边的居中文本。为了解决这个问题，我刚刚删除了 display: flex on it。

【讨论】：

使用margin-top: -1.2em; 将类bottom-right 对齐在英雄图像的右下角是一个好习惯吗？没有其他方法可以做到这一点吗？

【解决方案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;
}

【讨论】：