Vertically aligning text to a circle

Question

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

I am looking for a pure 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 the rescue... Calculate the top padding for the text by retrieving the text div offset height.

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 major pain points of CSS, so without it (or JS), what you're asking verges on impossible. If JS is an option you can adjust the spacing dynamically (ES6 because it works in browsers shape-outline does):

EDIT Update on the viability of common CSS vertical centering methods:

• As stated in the MDN docs, shape-outside, applies only to floated elements. This would seem to imply that the text must remain in flow with element you want to apply the shaping to. As far as I can tell, this limits you to only interacting with margin and padding properties, because of how positioning effects the text flow. Since the height is not fixed on your text block, you cannot use that value in calc property. In short, your text container must be statically positioned and display: block.

• Text wrapping is calculated prior to position: relative and transform, so those are of no use.

• Table cells treat all content of a cell as a single block (for centering), so the text is aligned to the top of the circle, which is vertically centered.

This would seem to eliminate every CSS-only vertical centering method as a candidate (that I'm aware of).

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