0

I have text between two floating elements, and the text is wrapping around the elements' shape outside. I want this text vertically centered on the page, but all vertical centering options I've tried cause the wrapping to break. This is how it looks right now:

text between text

I'm currently using padding-top: 40vh to roughly center the text, but this breaks in a smaller viewport. I've tried doing padding-top: 50vh and doing a transform translate(-50%) but that doesn't work. I've also tried table, flex and grid layouts without success. Furthermore I tried absolute positioning of the text which, obviously, also breaks wrapping since the text gets removed from the flow. Setting the padding-top dynamically with JavaScript is an option, but I would highly prefer a CSS solution.

Minimal example

html, body {
  padding: 0;
  margin: 0;
}

#container {
  height: 100vh;
  width: 100vw;
  
  text-align: justify;
}

#left {
  float: left;
  width: 30vw;
  height: 100vh;
  
  background: red;
  opacity: 0.1;
  
  shape-outside: polygon(0 0, 30vw 0, 20vw 20vh, 20vw 80vh, 30vw 100vh, 0 100vh);
}

#right {
  float: right;
  width: 30vw;
  height: 100vh;
  
  background: green;
  opacity: 0.1;
  
  shape-outside: polygon(30vw 0, 0vw 0, 10vw 20vh, 10vw 80vh, 0vw 100vh, 30vw 100vh, 0 100vh);
}

#container p {
  margin: 0;
}
<div id="container">
  <div id="left"></div>
  <div id="right"></div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce aliquam mattis sapien. Duis ut arcu sed nibh pretium ornare. Donec sed lacus viverra, pellentesque diam id, fringilla turpis. Donec egestas mauris libero, sit amet hendrerit nibh lobortis vel. Mauris sagittis elit libero, quis finibus arcu venenatis non. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p>
</div>
Steven van den Broek
  • 63
  • 5
  • can you share the code where we can also see the shape-outside? it will be more helpful than the code your shared – Temani Afif Aug 17 '19 at 08:08
  • I added it, though it shouldn't make a difference in the implementation right? – Steven van den Broek Aug 17 '19 at 08:21
  • it make a big difference. Without Shape outside, you question is a duplicate of ton other questions. The shape outside make it different. Also we need the code inside the question not as external link – Temani Afif Aug 17 '19 at 08:22
  • I added shape-outside to the snippet, though I'm curious for which question it would be a duplicate. Could you link me one, since I haven't found an existing question about vertical centering this way with wrapping text between floating elements. – Steven van den Broek Aug 17 '19 at 08:36
  • your code without shape-outside is a duplicate that's why I asked you to add shape-outside – Temani Afif Aug 17 '19 at 08:37
  • Could you elaborate? I don't see how shape-outside would change the problem. Again, could you link the question it would be a duplicate of if I hadn't added shape-outside to my code? – Steven van den Broek Aug 17 '19 at 08:42
  • https://stackoverflow.com/q/79461/8620333 / https://stackoverflow.com/q/19026884/8620333 / https://stackoverflow.com/q/19461521/8620333 .. and many many more – Temani Afif Aug 17 '19 at 08:44
  • None of these are about text wrapping between floats though, but anyways thanks for your comments. – Steven van den Broek Aug 17 '19 at 08:49
  • That's why we needed your code with the floating element and the shape-outside. **without** it (like your initial code) your question is a duplicate. That's what I am trying to explain. – Temani Afif Aug 17 '19 at 08:56
  • Oh yeah, I got it. Without shape-outside it is technically wrapping but not giving the wrapping effect so someone could suggest removing the floating entirely and to just use flexbox or something which would fix the visual effect of this particular snippet, but not my actual problem since I want it to be actually wrapping. Thanks for pointing it out! – Steven van den Broek Aug 17 '19 at 09:06

2 Answers2

0
#text {
    padding-top: 0; // remove padding including the inline padding
    position: relative;
    top: 50%;
    transform: translatey(-50%);
    left: -6%;
}
Carol McKay
  • 2,251
  • 1
  • 11
  • 13
0

It seems that this is impossible in general to do with only CSS, this may be possible in future levels of CSS shapes if it allows us to use shape-outside on non-floated elements. In the mean time we have to use JavaScript.

Steven van den Broek
  • 63
  • 5