垂直对齐单元与下面2/3空间上方的1/3空间对齐
垂直对齐单元与下面2/3空间上方的1/3空间对齐
提问于 2019-02-01 10:19:17
我有一个“英雄形象”填充的高度和宽度的视口。在这个div中有一个标题。我希望标题是垂直对齐，以便任何可用的空间是三分之一以上和三分之二以下。
例如:英雄图像=1000 For高。H1 = 400 px高。所以上面的空间=200 So下面的空间=400 So
这是一个响应的布局，所以我不知道的高度英雄形象或标题。
垂直中心化使用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/的链接
回答 3
Stack Overflow用户
回答已采纳
发布于 2019-02-01 11:42:24
使用psuedo元素使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>
Stack Overflow用户
发布于 2019-02-01 11:06:33
要处理布局部分，我需要使用CSS Grid：
CSS网格布局擅长于将页面划分为主要区域，或者根据大小、位置和层定义由HTML原语构建的控件的各个部分之间的关系。 与表一样，网格布局使作者能够将元素对齐为列和行。然而，与表相比，CSS网格的布局可能更多，或者更容易。例如，网格容器的子元素可以定位自己，因此它们实际上是重叠和层的，类似于CSS定位的元素。
.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>
Stack Overflow用户
发布于 2019-02-01 10:34:35
您可以使用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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54477407
复制相关文章
相似问题
腾讯云开发者
