两个 div 与纯文本的响应式对齐以实现视差

Question

我正在构建一个视差网站，但在使一个部分中的两个 div 变得绝对完美对齐的同时仍保持其响应特性时遇到了问题。

不幸的是，当 window 大小发生变化时，这两个元素的行为不符合预期。我附上了一张图片，说明我正在努力实现的目标。黄线表示我正在寻找的控件。文本 THIS IS 应与水平轴上的橙色文本完美对齐，而 SO AWESOME 的边缘应与橙色文本垂直对齐。

我该如何实现？

Fiddle: https://jsfiddle.net/76z982zn/2/

CSS

body,
html {
  height: 100%;
  background-color: black;
}

section {
  height: 100%;
  position: relative;
}

section > div {
  position: absolute;
}

* {
  padding: 0;
  margin: 0;
}

.header_container__1 {
  font-size: 2vw;
  line-height: 2vw;
  color: orange;
  top: 42vh;
  left: 35vw;
}

.header_container__2 {
  text-align: right;
  font-size: 10vw;
  line-height: 10vw;
  color: red;
  top: 50vh;
  right: 0;
  transform: translate(0%, -50%);
}

HTML

<section>
  <div class="header_container__1">
    <p>This is some text i want perfectly </p>
    <p>This is some text i want perfectly </p>
    <p>This is some text i want perfectly </p>
    <p>This is some text i want perfectly </p>
  </div>
  <div class="header_container__2">
    <p>THIS IS</p>
    <p>SO AWESOME</p>
  </div>

</section>

Answer 1

话不多说，就是几个css对齐属性的组合：

body {
  width:100%;
  height: 100vh;
  margin: 0px;
  background: black;
}

#supercontainer {
  position: absolute;
  top: 50%;
  right: 0;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);  
}

#container {
  display: inline-block;
  position: relative;
}

#a1 {
  display: inline-block;
  font-size: 0;
  color: tomato;
  margin-right: 0px;
  margin-left: auto;
  position: relative;
  text-align: right;
  margin: 0px;
  font-size: 4em !important;
  vertical-align: top;
  line-height: 0.8em;
}

#a1::first-line {
  line-height:1em;  
}

#a2 {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 0.7em;
  line-height: 2px;
  font-weight: bold;
  color: gold;
  vertical-align: baseline;
}

#a2::first-line {
  line-height: 0px;
}

<div id=supercontainer>
<div id=container>
  
<div id=a1>THIS IS<br>SO AWESOME</div>
  
<div id=a2>
<p>This is some text i want perfectly </p>
<p>This is some text i want perfectly </p>
<p>This is some text i want perfectly </p>
<p>This is some text i want perfectly </p>
</div>
  
</div>
</div>

Answer 2

~~作为快速修复，从 header_container__2 中删除 transform 并将两个容器的 top 属性设置为相等。 Fiddle~~

编辑 - 对齐 50%

body,
html {
  height: 100%;
  background-color: black;
}

section {
  height: 100%;
  position: relative;
}

section > div {
  position: absolute;
}

* {
  padding: 0;
  margin: 0;
}

.header_container__1 {
  display: inline-block;
  float: left;
  font-size: 2vw;
  line-height: 2vw;
  color: orange;
}

.header_container__2 {
  text-align: right;
  font-size: 10vw;
  line-height: 10vw;
  color: red;
  top: 50vh;
  right: 0;
  transform: translate(0%, -50%);
}

<section>
  <div class="header_container__2">
    <div class="header_container__1">
      <p>This is some text i want perfectly</p>
      <p>This is some text i want perfectly</p>
      <p>This is some text i want perfectly</p>
      <p>This is some text i want perfectly</p>
    </div>
    THIS IS
    <p>SO AWESOME</p>
  </div>
</section>

两个 div 与纯文本的响应式对齐以实现视差

Responsive alignment of two divs with pure text for parallax

javascript

jquery

html

css

parallax