问题描述
我有两个兄弟div。一个占据了父对象的70％的宽度，并向左浮动。它具有剪切路径来创建不规则多边形。同级div的宽度为父级的100％。我在浮动div上放置了一个 shape-outside 属性，以允许兄弟姐妹中的文本以遵循多边形对角线的方式进行换行。
我无法解决的问题是，非浮动兄弟姐妹中的文本是动态的，可以是单行或多行。我想确保文本在非浮动div中垂直居中，并遵循 shape-outside 线。
Flex，网格和表格似乎破坏了文本遵循 shape-outside 行的功能。
红色箭头是我们所做的翻译，由 top：50％; transform：translateY（-50％）完成。 top相对于容器的高度（ 25rem ）并转换为元素的高度，因此我们将得到 12.5rem-h / 2
如果我们考虑由蓝线定义的角度，我们将得到 tan（angle）= G / R ，其中 G 是我们要寻找的距离，而 R 是我们已经定义的距离。
对于相同的角度，我们也有 tan（angle）= W / H 其中 H 是容器的高度，W是由剪切路径除去的底部，它是 50％（少一点，但让我们轻松一点）的c>表示，因此我们将拥有整个屏幕宽度的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 的值以纠正对齐方式：
main {高度：25rem; margin：auto;}＃main-left {background-image：url（’https://drive.google.com/uc?id=1NeUyxUgp7I56mTpmzYIUXbQilRnd0dAK’）；背景尺寸：封面；背景位置：中心；宽度：75％;高度：100％;向左飘浮; -webkit-clip-path：多边形（0 0，95％0，50％100％，0％100％）;剪切路径：多边形（0 0，95％0，50％100％，0％100％）;形状外：多边形（0 0，97％0，50％100％，0％100％）;}＃main-right {宽度：100％;高度：100％；} p {位置：相对；最高：50％; transform：translateY（-50％）;} <主要> < div id = main-left>< / div> < div id = main-right> < p>试一下角度。这是计划外的，实际上确实会发生。风扇刷是很棒的设备。用它。结交朋友。我们对我们的世界没有限制。我们仅受我们的想象力限制。您意识到苦难的事实足以让您为自己还活着并可以经历而高兴。我们这里只有幸福的树木。这幅画出自您的内心。如果您愿意，任何小事都可以成为您的朋友。了解何时停止。您可以创造美丽的事物-但您必须首先在脑海中看到它们。洗世界上没有什么不对的。这些枪支小儿子藏在您的刷子中，您只需要将其推出即可。< / p> < / div>< / main>
I've got two sibling divs. One takes up a width of 70% of the parent and is floated to the left. It has a clip-path to create an irregular polygon. The sibling div has a width of 100% of the parent. I've put a shape-outside property on the floated div to allow the text in the sibling to wrap in a way that follows the diagonal of the polygon.
My issue that I'm having trouble solving is that the text in the non-floated sibling is dynamic and could either be single or multi-line. I would like to make sure that the text stays vertically centered in the non-floated div AND follow the shape-outside line.
Flex, grid, and table seem to break the ability of the text to follow the shape-outside line. 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>We can consider the trick of using position:absolute but with relative since absolute won't work and relative will do the same here because your element is already placed at the top so when using top:50%;transform:translateY(-50%) we will have a partial vertical centring like below:
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>Now the issue is that the translation will create an offset that you need to rectify with another translation. Here is an illustration to better understand how to the issue and what translation we need to apply:
The red arrow is the translation we made which is done by top:50%;transform:translateY(-50%). top is relative to the height of the container (25rem) and transform to the height of the element so we will have 12.5rem - h/2
If we Consider the angle defined by the blue line we will have tan(angle) = G/R where G is the distance we are looking for and R is what we defined already.
For the same angle we also have tan(angle) = W / H where H is the container height and W is the bottom part removed by the clip-path which is 50% of the width (a little less but let's make it easy) so we will have 50% of 75% of the whole screen width. We can apporoximate it to 37.5vw thus tan(angle) = 37.5vw / 25rem.
So G = (37.5vw/25rem)*(12.5rem - h/2) = 18.75vw - (18.75vw/25rem)*h = 18.75vw*(1 - h/25rem).
It's clear that we have no way to represent this value using pure CSS thus you will need to consider JS to dynamically update the value of translateX in order to rectify the alignment:
// 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>这篇关于在浮动兄弟姐妹旁边的Div中垂直对齐多行文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！