Question

我有一个“英雄形象”，填补了视口的高度和宽度。在div中有一个标题。我希望标题垂直对齐，以便所有可用空间都在上方三分之一和下方三分之二。

例如：英雄图片= 1000像素高。 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/

Answer 1

您可以使用calc(33% - <headinghieght>)，但是您需要知道headingHieght。

您可以尝试如下操作：

#container1 {
    /*hieght : 100px;*/
    border : 2px solid blue; 
}

#headingContainer {
    margin-top: 33%;
    margin-bottom: 66%;
    hieght : 40px;
    border: 1px solid red;
}

<h1>The calc() Function</h1>

<div id = "container1">
text
    <div id = "headingContainer">HEADING</div>
    text 2
</div>

Answer 2

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

CSS Grid Layout擅长将页面划分为主要区域，或根据HTML原语构建的控件各部分之间在大小，位置和层方面定义关系。

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

MDN

Try it online!

.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>

Answer 3

使您的subscribed function为列 hero_image，其中包含伪元素 ：

将flexbox赋予flex: 1和
before至flex: 2可获得效果。

请参见下面的演示

after

.hero_image {
  min-height: 100vh;
  background-color: yellow;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;  /* ADDED */
}

.hero_image h1 {
  font-size: 72px;
  padding-top: 20px;
  background: #fff; /* For Illustration */
}

body {
  margin: 0;
}

.hero_image:after { /* ADDED */
  flex: 2;
  content: '';
}
.hero_image:before { /* ADDED */
  flex: 1;
  content: '';
}

将元素垂直对齐，上方有1/3的空间，下方有2/3的空间

3 个答案: