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

Posted 2023-03-05

【中文标题】垂直对齐元素，上方 1/3 空间下方 2/3 空间

【英文标题】：Vertically align element with 1/3 space above 2/3 space below

【发布时间】：2019-06-25 21:46:24

【问题描述】：

我有一个“英雄形象”填充视口的高度和宽度。在这个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/

【问题讨论】：

你好。你能分享你的代码吗？ (minimal reproducible example)

如果不检查您的代码，我们无法帮助您。请添加工作代码 sn-p 或 jsfiddle 链接。谢谢

另外，我认为您想要的布局图像会有所帮助。 （用任何颜料制作）

@user2991837 提供有助于解决问题的示例代码或使用 flexbox align-content: space-between;

【参考方案1】：

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

CSS 网格布局擅长将页面划分为主要区域，或根据大小、位置和层定义由 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>

【参考方案2】：

您可以使用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>

【参考方案3】：

使您的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: '';

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