Vertically Align Multi-line Text in a Div Sitting Next to Floated Sibling

Question

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> 

Answer 1

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>