Question

我正在尝试将某些文本垂直对齐到具有外部形状属性的圆圈。

我正在寻找纯粹的CSS解决方案。

参见jsfiddle：https://jsfiddle.net/dybt94ds/

QTcpSocket

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

Answer 1

救援...通过检索文本div偏移高度来计算文本的顶部填充。

＆＃13;

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";
}

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

预弯曲，动态垂直对齐是CSS的主要难点之一，所以没有它（或JS），你所要求的就是不可能的。如果JS是一个选项，你可以动态调整间距（ES6，因为它适用于浏览器shape-outline）：

编辑更新常见CSS垂直居中方法的可行性：

如MDN文档中所述，shape-outside仅适用于浮动元素。这似乎意味着文本必须保留在您想要应用整形的元素的流中。据我所知，这限制了您只与margin和padding属性进行交互，因为定位会影响文本流。由于文本块上的高度未固定，因此您无法在calc属性中使用该值。简而言之，您的文本容器必须静态定位并display: block。
文字换行是在position: relative和transform之前计算出来的，所以没有用。
表格单元格将单元格的所有内容视为单个块（用于居中），因此文本与圆的顶部对齐，垂直居中。

这似乎消除了每个仅限CSS的垂直居中方法作为候选人（我都知道）。

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

Answer 3

它从我身边解决了。我已将旧的经典表结构布局应用于display：table to parent和display：table-cell和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;
}

这只是我最喜欢的解决方案！希望这有效！

将文本垂直对齐到圆圈

3 个答案: