Vertical alignment of text

Question

I am trying to vertically align some text with a circle having a shape-outside property.

I am looking for a clean css solution.

See jsfiddle: https://jsfiddle.net/dybt94ds/

.wrap { height: 220px; width: 400px; } .circly { background: red; height: 200px; width: 200px; border-radius: 50%; float: left; shape-outside: circle(); } 

 <div class="wrap"> <div class="circly"></div> <div class="text"> I am lots of text. I should always be verticly centered to the middle of the circle. </div> </div> <div class="wrap"> <div class="circly"></div> <div class="text"> I am lots of text. I should always be verticly centered to the middle of the circle. I am lots of text. I should always be verticly centered to the middle of the circle. </div> </div> <div class="wrap"> <div class="circly"></div> <div class="text"> I am lots of text. I should always be verticly centered to the middle of the circle. I am lots of text. I should always be verticly centered to the middle of the circle. I am lots of text. I should always be verticly centered to the middle of the circle. </div> </div> 

Answer 1

js to save ... Calculate the top complement for the text by getting the offset height of the text div .

 var elements = document.getElementsByClassName('text'); for (i = 0; i < elements.length; i++) { var pad = (200 - elements[i].offsetHeight) / 2; elements[i].style.paddingTop = pad + "px"; } 

 .wrap { height: 220px; width: 400px; } .circly { background: red; height: 200px; width: 200px; border-radius: 50%; float: left; shape-outside: circle(); } 

 <div class="wrap"> <div class="circly"></div> <div class="text"> I am lots of text. I should always be verticly centered to the middle of the circle. </div> </div> <div class="wrap"> <div class="circly"></div> <div class="text"> I am lots of text. I should always be verticly centered to the middle of the circle. I am lots of text. I should always be verticly centered to the middle of the circle. </div> </div> <div class="wrap"> <div class="circly"></div> <div class="text"> I am lots of text. I should always be verticly centered to the middle of the circle. I am lots of text. I should always be verticly centered to the middle of the circle. I am lots of text. I should always be verticly centered to the middle of the circle. </div> </div> 

Answer 2

Pre-flex, dynamic vertical alignment was one of the main points of CSS pain, so without it (or JS) what you ask becomes impossible. If JS is an option, you can dynamically adjust the spacing (ES6 since it works in shape-outline browsers):

EDIT Updating the viability of common CSS vertical centering methods:

• As indicated in the MDN docs, shape-outside applies only to floating elements. This seems to imply that the text should remain in the stream with the element to which you want to apply the formula. As far as I can tell, this limits the interaction only with margin and padding properties, due to how positioning affects the flow of text. Since the height is not fixed in the text block, you cannot use this value in the calc property. In short, your text container should be statically positioned and display: block .

• Text packaging is calculated to position: relative and transform , so they are useless.

• The cells of the table process the entire contents of the cell as one block (for centering), so the text aligns with the top of the circle, which has a vertical orientation.

It would seem to exclude every CSS-only vertical centering method as a candidate (which I know of).

 document.querySelectorAll('.text').forEach((text) => { text.style.paddingTop = `${(200 - text.clientHeight)/2}px`; }); 

Answer 3

He decided on my part. I applied the old classic structure of the table structure using display: table to parent and display: table-cell and vertical-align: middle to child divs.

 .wrap { height: 220px; width: 400px; display :table; } .circly { background: red; height: 200px; width: 200px; border-radius: 50%; float: left; shape-outside: circle(); display:table-cell; vertical-align:middle; } .text { display:table-cell; vertical-align:middle; } 

It was only the preferred solution from my end! Hope it works!

Answer 4

You can use transform: translate(0%, -50%); to make them vertically average.

 .wrap { height: 220px; width: 400px; position: relative; } .circly { background: red; height: 200px; width: 200px; border-radius: 50%; float: left; shape-outside: circle(); } .text { position: absolute; transform: translate(0%, -50%); top: 50%; left: 50%; } 

 <div class="wrap"> <div class="circly"></div> <div class="text"> I am lots of text. I should always be verticly centered to the middle of the circle. </div> </div> <div class="wrap"> <div class="circly"></div> <div class="text"> I am lots of text. I should always be verticly centered to the middle of the circle. I am lots of text. I should always be verticly centered to the middle of the circle. </div> </div> <div class="wrap"> <div class="circly"></div> <div class="text"> I am lots of text. I should always be verticly centered to the middle of the circle. I am lots of text. I should always be verticly centered to the middle of the circle. I am lots of text. I should always be verticly centered to the middle of the circle. </div> </div> 

You can also check this fiddle