在浮动兄弟姐妹旁边的Div中垂直对齐多行文本

Question

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

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

Flex，网格和表格似乎破坏了文本遵循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的技巧，因为绝对值将不起作用，而相对值将在此处执行相同操作，因为您的元素已经放在顶部，因此在使用{{1 }}，我们将具有如下所示的部分垂直居中位置：

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相对于容器的高度（top:50%;transform:translateY(-50%)），并转换为元素的高度，因此我们将得到25rem

如果考虑由蓝线定义的角度，我们将得到12.5rem - h/2，其中tan(angle) = G/R是我们要寻找的距离，G是我们已经定义的距离。

对于相同的角度，我们也有R，其中tan(angle) = W / H是容器的高度，W是被H除去的底部，clip-path的宽度是{ em>（少一点，但让我们轻松一点），这样我们就可以拥有整个屏幕宽度的75％的50％。我们可以将其近似为50%，因此为37.5vw。

所以tan(angle) = 37.5vw / 25rem。

很显然，我们无法使用纯CSS表示此值，因此您需要考虑使用JS动态更新G = (37.5vw/25rem)*(12.5rem - h/2) = 18.75vw - (18.75vw/25rem)*h = 18.75vw*(1 - h/25rem)的值以纠正对齐方式：

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%);
}