Javascript 如何动态对齐圆内的文本？

我有一个带有随机文本的div。我把div设计成一个圆。我想将文字对齐在圆心的圆圈内。我可以手动操作，我的意思是对于静态文本，我可以这样做。我想知道是否有任何方法可以动态执行此操作。我想根据文本大小自动创建圆，并将文本定位在中心并对齐

我有密码：

试验
嗨，这是我网站的问候语部分

谢谢。

您可以使用

#greeting{
    display: flex;
    justify-content: center;
    align-items: center;
}

工作原理：

justify content

定义flex项目将根据主轴对齐的位置（在本例中为水平）

对齐项目

对垂直于主项目的轴执行相同的操作（在本例中为垂直轴）

---

它适用于任何元素，并且它可能是水平和垂直居中的最简单和最短的方法

易于使用的

变换

。这是CSS3，请记住在

transform

属性（-webkit-）前面加前缀

---

将带有类main的部分设置为

显示：表格并给出
显示：表格单元格和
垂直对齐：中间样式至
#问候语
。如果此代码中的文本大小增加，对齐方式将相应调整

请参见工作示例
HTML：

<section class="main">
    <div id="greeting">
        <p>Hi, This is the greeting part of my site.</p>
    </div>
</section>

小提琴手：
经过大量搜索，我已经解决了这个问题。我唯一的线索来自：

然后我尝试了很多时间，最后我做到了。以下是javascript代码：

<script type="text/javascript">
    var gr = $('#gr').width();
    var grt = $('#greeting').width();
    //alert(grt/2.5 >=gr);
    if((grt/2.5)>=gr)
    {
        $('#gr').css({'height':gr+'px'});
    }
    else{
        $('#greeting').css({'width':gr*2.5+'px'});
        $('#greeting').css({'height':gr*2.5+'px'});
    }
</script>

您可以在中查看。
使用不同长度的文本运行后，对齐被破坏。我试图找到一种方法，在这种方法中，圆圈大小、文本位置是自动计算的。我想我们需要一些javascript来实现这一点。但我不知道怎么做。谢谢你的回答。顺便说一句，你的方式和文本对齐很好。非常感谢。我还需要一件事。如何根据文本大小调整圆的大小？你的意思是如果文本长度更长，它应该沿着圆线缠绕吗？是的。如果文本长度足以溢出圆圈区域，则应调整圆圈的大小。等等，不能同时使用两种方法，要么将文本换行，要么将文本保留在一行，但增加圆圈的大小。我的意思是，直到文本足够短，可以在圆圈中换行，只有文本才会对齐。但是，如果文本较长，圆圈将稍微调整大小。我猜可能需要一些javascript工作。我们不是来为您编写代码的。你必须通过谷歌或搜索做一些研究，所以……尝试一下，如果你仍然无法让它工作，问一个新问题。插入大量文本后，圆圈变成了蛋形。
<section class="main">
    <div id="greeting">
        <p>Hi, This is the greeting part of my site.</p>
    </div>
</section>

section.main{
    display: table;
    border:  2px solid #999;
    height: 200px;
    width: 200px;
    background-color: #ccc;
    border-radius: 50%;
    padding: 7rem;
}

section.main > #greeting{
    display: table-cell;
    text-align: center;
    vertical-align: middle
}

<script type="text/javascript">
    var gr = $('#gr').width();
    var grt = $('#greeting').width();
    //alert(grt/2.5 >=gr);
    if((grt/2.5)>=gr)
    {
        $('#gr').css({'height':gr+'px'});
    }
    else{
        $('#greeting').css({'width':gr*2.5+'px'});
        $('#greeting').css({'height':gr*2.5+'px'});
    }
</script>

<div id="greeting">
    <p id="gr">
         Hi there this is my greeting part.
    </p>
</div>

#greeting{
color: #F8F8F8;
margin:5px;
width:0px;
border-radius: 50%;
background-color: #F99793;
text-align: center;
 display: flex;
justify-content: center;
align-items: center;
}
#gr{
isplay: flex;
justify-content: center;
align-items: center;
word-wrap:break-word;
}