将文本垂直对齐到圆圈

Question

我试图将一些文本垂直对齐到具有外形属性的圆.

我正在寻找一个纯粹的CSS解决方案.

见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 来救援...通过检索文本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>