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>