时间戳

首页 > 解决方案 > 垂直对齐元素，上方 1/3 空间下方 2/3 空间

html - 垂直对齐元素，上方 1/3 空间下方 2/3 空间

问题描述

我有一个“英雄形象”填充视口的高度和宽度。这div里面有一个标题。我希望标题垂直对齐，以便任何可用空间在上方三分之一和下方三分之二。

例如：英雄图片 = 1000px 高。H1 = 400 像素高。所以上面的空间= 200px 下面的空间= 400px

这是一个响应式布局，所以我不知道主图或标题的高度。

使用 Flexbox 垂直居中很容易，但我需要更多空间。任何人都可以向我建议正确的方向吗？

到目前为止，这是我的代码。请注意，我以前没有使用过 Flex，所以我真的不知道自己在做什么。

.hero_image {
    min-height:100vh;
    background-color:yellow;
    display: flex;
    align-items: center;
    justify-content: center;
    }

.hero_image h1 {
    font-size:72px;
    padding-top:20px;
    }

<div class="hero_image">
    <h1>Heading <br>more text <br>last bit of text</h1>
</div>

这是 JSFiddle 示例的链接 https://jsfiddle.net/yvf6tgh8/2/

标签： htmlcssflexboxalignment

解决方案

为了处理布局部分，我将使用 CSS Grid：

CSS 网格布局擅长将页面划分为主要区域，或根据大小、位置和层定义由 HTML 基元构建的控件各部分之间的关​​系。

与表格一样，网格布局使作者能够将元素对齐到列和行中。但是，与使用表格相比，使用 CSS 网格可以实现或更容易的更多布局。例如，网格容器的子元素可以定位自己，以便它们实际上重叠和分层，类似于 CSS 定位元素。

MDN

在线尝试！

.hero_image {
  min-height: 100vh;
  background-color: yellow;
  display: grid;
  grid-template-rows: 1fr auto 2fr; /* here is the fun */
}

.hero_image>.content {
  width: 100%;
  display: flex;
  justify-content: center;
}

.hero_image h1 {
  font-size: 72px;
  padding-top: 20px;
}

/* just to show margin */
.hero_image>div:first-child,
.hero_image>div:last-child {
  background: red;
}

body {
  margin: 0;
}
<div class="hero_image">
  <div></div>
  <div class="content">


    <h1>Heading <br>more text <br>last bit of text</h1>
  </div>
  <div></div>
</div>

推荐阅读