Question

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

我有代码here：

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

谢谢。

Answer 1

您可以使用

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

工作原理：

justify-content定义flex项根据主轴（在我们的例子中是水平）对齐的位置

align-items对垂直于主轴的轴做同样的事（在我们的例子中是垂直的）。

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

Answer 2

经过大量搜索，我解决了这个问题。我从here获得了唯一的线索：

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

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

以下是HTML代码：

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

最后这里是CSS部分：

Time.now.end_of_month + 6.hours

您可以在here中查看。

Answer 3

易于使用transform。这是CSS3并记得在transform属性（-webkit-等）前缀。

Fiddle for you

#greeting{
    position: relative;
    height:450px;
    width:450px;
    border-radius: 50%;
    background-color: #779EC6;
    text-align: center;
}

p {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%);
}

Answer 4

HTML：

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

CSS：

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
}

FIDDLE：http://jsfiddle.net/y3699smx/

Answer 5

将类main设置为display:table;，并将display: table-cell;和vertical-align: middle;样式设置为#greeting。如果此代码中的文本大小会增加，则会相应地调整对齐方式。

请参阅工作示例http://jsfiddle.net/guruWork/oc9mrz38/

如何动态对齐圆圈内的文字？

5 个答案: