如何在由形状外创建的圆内使文本垂直居中? [英] How to vertically center text within a circle created with shape-outside?

问题描述

我有一个段落元素，其中有一些文本是依靠shape-outside CSS属性包含在圆的范围内的.到目前为止，HTML和CSS代码如下:

I have a paragraph element with some text that I have contained inside the confines of a circle by relying on the shape-outside CSS property. The HTML and CSS code thus far are as follows:

#testimony-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  text-align: center;
}

.text {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0%;
  left: 0%;
  margin: 0%;
  font-weight: 500;
}

.text::before {
  content: "";
  width: 50%;
  height: 100%;
  float: left;
  shape-outside: polygon( 0 0, 98% 0, 50% 6%, 23.4% 17.3%, 6% 32.6%, 0 50%, 6% 65.6%, 23.4% 82.7%, 50% 94%, 98% 100%, 0 100%);
  shape-margin: 7%;
}

.text p {
  height: 100%;
  margin: 0;
}

.text p::before {
  content: "";
  width: 50%;
  height: 100%;
  float: right;
  shape-outside: polygon( 2% 0%, 100% 0%, 100% 100%, 2% 100%, 50% 94%, 76.6% 82.7%, 94% 65.6%, 100% 50%, 94% 32.6%, 76.6% 17.3%, 50% 6%);
  shape-margin: 7%;
}

<div id="testimony-wrapper">
  <div class="text">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
</div>

这一切都很好，只要文本占据了段落元素的整个高度.但是，当内容较少时，所有文本都集中在圆圈的顶部.在这种情况下，我希望能够使文本在圆内垂直居中.

This is all well and good so long as the text occupies the entire height of the paragraph element. However, when there is less content, all the text is concentrated at the top of the circle. In a case like this, I would like to be able to vertically center the text inside the circle.

许多在线解决方案建议将显示属性更改为表格或弹性，以利用这些显示类型可以访问的相应的vertical-align和align-items属性，但这样做会破坏shape-outside属性我目前正在将内容保留在圆圈内，这仅适用于块元素.

A lot of the solutions online suggest changing the display property to either table or flex to take advantage of the respective vertical-align and align-items properties these display types give you access to but doing so would break the shape-outside property I'm currently using to keep the content within the circle, which only works on block elements.

是否有任何方法可以在不使用表格或柔性显示的情况下垂直对齐内容，或者如果没有，是否可以在不依赖shape-outside属性的情况下使文本显示在圆内?

Is there any way to vertically align content without using either table or flex display or, if there isn't, is there a way to make the text display inside a circle without relying on the shape-outside property?

推荐答案

首先，我将基于此先前的答案那么我认为没有一种简单的方法可以使shape-outside居中显示文本，因为所有常用技术都会破坏浮点数.

First I would consider a different idea based on this previous answer then I don't think there is a trivial way to center text with shape-outside because all the common technique will break the float porperty.

一个想法是用一些填充来补偿文本，这些填充是在加载和调整大小时动态地计算出来的:

One idea is to offset the text with some padding that you calculate dynamially on load and on resize:

$('.e').css('padding-top',($('.e').parent().height() - $('.e').height())/2);
$('.e').css('padding-top',($('.e').parent().height() - $('.e').height())/2);

$(window).resize(function() {
  $('.e').css('padding-top',($('.e').parent().height() - $('.e').height())/2);
  $('.e').css('padding-top',($('.e').parent().height() - $('.e').height())/2);
});

div.box {
  background: #333;
  color:#fff;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100vmin;
  height: 100vmin;
  text-align:justify;
  border-radius: 50%;
  overflow:hidden;
}

.box >div {
  height:100%;
}

.box >div > div {
    padding-top: 50px;
}

.box:before,
.box >div:before {
  content: '';
  float: left;
  height:100%;
  width: 50%;
  shape-outside: radial-gradient(farthest-side at var(--d,right), transparent 98%, red 0);
  shape-margin:5px;
}

.box >div:before {
  float: right;
  --d:left;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box">
 <div><div class="e">Lorem ipsum dolor sit amet, eget orci, tinci dunt place rat in sociis. Pel lentes que ultri cies. cies. dolor ipsum tinci dunt place rat in sociis. Pel lentes que ultri cies. cies. dolor ipsum</div></div>
</div>

请注意，我两次调用相同的逻辑，因为高度会在第一次填充调整后发生变化，并且您需要进行另一次迭代才能进行校正.实际上，我们可能需要更多的迭代，直到死点为止，但似乎需要2次迭代.

Note that I am calling the same logic twice because the height will change after the first padding adjustment and you we need another iteration to rectify. In reality we may need more iterations until it's dead center but 2 iterations seems to do the job.

为了简单起见，我使用jQuery，但是您可以轻松地将其翻译为Vanilla JS

I used jQuery for simplicity but you can easily translate it to vanilla JS

这篇关于如何在由形状外创建的圆内使文本垂直居中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！