html - 垂直对齐位于 float sibling 旁边的 Div 中的多行文本

Question

我有两个同级 div。一个占据父级 70% 的宽度，并向左浮动。它有一个 clip-path 来创建一个不规则的多边形。同级 div 的宽度为父级的 100%。我在 float 的 div 上放置了一个 shape-outside 属性，以允许同级中的文本以遵循多边形对 Angular 线的方式换行。

我无法解决的问题是非 float 同级中的文本是动态的，可以是单行或多行。我想确保文本在非 float div 中保持垂直居中，并遵循 shape-outside 行。

Flex、grid 和 table 似乎破坏了文本跟随 shape-outside 行的能力。 Here is a link to a code pen with what is currently set up.

main {
  height: 25rem;
  width: 95vw;
  margin: auto;
}

#main-left {
  background-image: url('https://drive.google.com/uc?id=1NeUyxUgp7I56mTpmzYIUXbQilRnd0dAK');
  background-size: cover;
  background-position: center;
  width: 75%;
  height: 100%;
  float: left;
  -webkit-clip-path: polygon(0 0, 95% 0, 50% 100%, 0% 100%);
  clip-path: polygon(0 0, 95% 0, 50% 100%, 0% 100%);
  shape-outside: polygon(0 0, 97% 0, 50% 100%, 0% 100%);
}

#main-right {
  width: 100%;
  height: 100%;
}

<main>
  <div id="main-left"></div>
  <div id="main-right">
    <p>Play with the angles. This is unplanned it really just happens. A fan brush is a fantastic piece of equipment. Use it. Make friends with it. We have no limits to our world. We're only limited by our imagination. The very fact that you're aware of
      suffering is enough reason to be overjoyed that you're alive and can experience it. We don't have anything but happy trees here. This painting comes right out of your heart. Any little thing can be your friend if you let it be. Learn when to stop.
      You can create beautiful things - but you have to see them in your mind first. There's not a thing in the world wrong with washing your brush. These little son of a guns hide in your brush and you just have to push them out.</p>
  </div>
</main>

Answer 1

我们可以考虑使用 position:absolute 但使用 relative 的技巧，因为 absolute 不会起作用，而 relative 会在这里做同样的事情，因为你的元素已经放在顶部，所以当使用 top:50%;transform:translateY(-50%) 时，我们将有一个部分垂直居中，如下所示:

main {
  height: 25rem;
  margin: auto;
}

#main-left {
  background-image: url('https://drive.google.com/uc?id=1NeUyxUgp7I56mTpmzYIUXbQilRnd0dAK');
  background-size: cover;
  background-position: center;
  width: 75%;
  height: 100%;
  float: left;
  -webkit-clip-path: polygon(0 0, 95% 0, 50% 100%, 0% 100%);
  clip-path: polygon(0 0, 95% 0, 50% 100%, 0% 100%);
  shape-outside: polygon(0 0, 97% 0, 50% 100%, 0% 100%);
}

#main-right {
  width: 100%;
  height: 100%;
}

p {
  position:relative;
  top:50%;
  transform:translateY(-50%);
}

<main>
  <div id="main-left"></div>
  <div id="main-right">
    <p>Play with the angles. This is unplanned it really just happens. A fan brush is a fantastic piece of equipment. Use it. Make friends with it. We have no limits to our world. We're only limited by our imagination. The very fact that you're aware of
      suffering is enough reason to be overjoyed that you're alive and can experience it. We don't have anything but happy trees here. This painting comes right out of your heart. Any little thing can be your friend if you let it be. Learn when to stop.
      You can create beautiful things - but you have to see them in your mind first. There's not a thing in the world wrong with washing your brush. These little son of a guns hide in your brush and you just have to push them out.</p>
  </div>
</main>

现在的问题是翻译会产生一个偏移量，您需要用另一个翻译来纠正这个偏移量。这是一个示例，可以更好地理解如何解决这个问题以及我们需要应用什么样的翻译:

红色箭头是我们所做的翻译，由 top:50%;transform:translateY(-50%) 完成。 top 相对于容器的高度 (25rem) 并转换为元素的高度，因此我们将有 12.5rem - h/2

如果我们考虑由蓝线定义的 Angular ，我们将得到 tan(angle) = G/R 其中 G 是我们正在寻找的距离，R 是我们已经定义的。

对于相同的 Angular ，我们还有 tan(angle) = W/H 其中 H 是容器高度，W 是被 移除的底部clip-path 是宽度的 50% (少一点，但让我们简单点) 所以我们将拥有整个 75% 的 50%屏幕宽度。我们可以将其近似为 37.5vw，因此 tan(angle) = 37.5vw/25rem。

所以 G = (37.5vw/25rem)*(12.5rem - h/2) = 18.75vw - (18.75vw/25rem)*h = 18.75vw*(1 - h/25rem).

很明显，我们无法使用纯 CSS 表示此值，因此您需要考虑 JS 动态更新 translateX 的值以纠正对齐:

// to make it easy we will consider font-size: 16px thus 25rem = 400px
var p= document.querySelector('p');
var h = (p.offsetHeight/400 - 1); /*we need a negative translation*/
var translateX = "calc(18.75vw * "+h+")";  
p.style.transform="translate("+translateX+",-50%)";

window.onresize = function(event) {
   
  h = (p.offsetHeight/400 - 1);
  translateX = "calc(18.75vw * "+h+")";  
  p.style.transform="translate("+translateX+",-50%)";
  
};

main {
  height: 25rem;
  margin: auto;
}

#main-left {
  background-image: url('https://drive.google.com/uc?id=1NeUyxUgp7I56mTpmzYIUXbQilRnd0dAK');
  background-size: cover;
  background-position: center;
  width: 75%;
  height: 100%;
  float: left;
  -webkit-clip-path: polygon(0 0, 95% 0, 50% 100%, 0% 100%);
  clip-path: polygon(0 0, 95% 0, 50% 100%, 0% 100%);
  shape-outside: polygon(0 0, 97% 0, 50% 100%, 0% 100%);
}

#main-right {
  width: 100%;
  height: 100%;
}

p {
  position:relative;
  top:50%;
  transform:translateY(-50%);
}

<main>
  <div id="main-left"></div>
  <div id="main-right">
    <p>Play with the angles. This is unplanned it really just happens. A fan brush is a fantastic piece of equipment. Use it. Make friends with it. We have no limits to our world. We're only limited by our imagination. The very fact that you're aware of
      suffering is enough reason to be overjoyed that you're alive and can experience it. We don't have anything but happy trees here. This painting comes right out of your heart. Any little thing can be your friend if you let it be. Learn when to stop.
      You can create beautiful things - but you have to see them in your mind first. There's not a thing in the world wrong with washing your brush. These little son of a guns hide in your brush and you just have to push them out.</p>
  </div>
</main>