垂直对齐Flo中兄弟坐在旁边的Div中的多行文本

Question

我有两个兄弟姐妹。一个占据父母的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的技巧，因为绝对不会起作用，而且亲戚会在这里做同样的事情因为你的元素已经放在顶部所以当使用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

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

对于相同的角度，我们也有tan(angle) = W / H，其中H是容器高度，W是由clip-path移除的底部部分，它是宽度的50%（稍微少但让它变得容易）所以我们将有50％的75％整个屏幕宽度。我们可以把它加到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>