无法在100 VH容器中对齐文本

Question

我已经被问了6个小时，我需要寻求帮助。我在第一部分内正确对齐文本时遇到问题。

到目前为止这是该网站。

Inspect Site Here

这是HTML。

<section class="intro_description">
   <div class="fix ">
     <h1>Title of Project</h1>
       <p class="paragraph">Dear Stackexchange, this is my section that I am having problems with. I would be very thankful if you could please tell me what I'm doing wrong.</p>
   <div>
</section>

我创建了一个网站，其中布局由堆叠的部分组成，每个部分的高度和宽度值使用VH百分比定义，以获得特定的布局。

这是如何在CSS中定义部分的示例。

.intro_description {
height: 70vh;
width: 100%;
background: #FFFFFF;
display: relative;
padding: 40px;
}

应用了.intro_description类的父容器内部是另一个应用了.fix类的div。这是CSS的原因。

.fix {

position: absolute;
top:50%;
bottom:10%;
left:12%;
right: 10%;
transform:translate(0%, -50%);
-webkit-transform:translate(0%, -50%);
}

理想情况下，标题和描述应与视口底部对齐，填充与附加图像一致。

你能告诉我我做错了什么吗？

Answer 1

很难说出你想要什么，但无论如何：你的班级.fix有position: absolute。这仅在父元素具有某些 position设置（除默认static之外）时才有效。首先，将position: relative添加到.intro_description。这不会改变.intro_description的位置，但会使.fix的绝对定位生效。

编辑：

评论后补充：

1。）您将父元素更改为display:relative，但必须为position: relative

2。）.fix有两个规则（媒体查询中有一个规则）。最终，.fix必须包含以下参数：

.fix {
  position: absolute;
  bottom: 0px !important;
  top: inherit; 
}

因此它与其父元素的底部对齐（即在后续section之上），而不是通过top设置在高度上拉伸。是否要保持transform: translate(0%, -50%);设置（将此块向上移动高度的50％）是一个品味问题。