javascript - 如何动态对齐圆内的文本?

标签 javascript jquery html css

我有一个带有一些随机文本的 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>

谢谢。

最佳答案

你可以使用

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

它是如何工作的:

justify-content 定义 flex 元素将根据主轴对齐的位置(在我们的例子中为水平对齐)

align-items 对垂直于主轴的轴(在我们的例子中是垂直的)执行相同的操作。

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

关于javascript - 如何动态对齐圆内的文本?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33040168/

相关文章:

php - 通过 jQuery $.ajax 将 JavaScript 数组传递给 PHP

javascript - 在 Razor 生成的隐藏字段上强制执行类型,在 JavaScript 中接收变量而不进行强制转换

html - 负边距和滚动条

jquery - 获取子div在jquery中的位置

javascript - 当我在谷歌地图中缩小时,我的符号的大小变得太大

javascript - jQuery .validate() 不适用于动态创建的表行

javascript - 添加的 html 元素已添加到 DOM 但不可见

javascript - 在弹出窗口中隐藏网址栏

javascript - 如何从异步调用返回响应?

html - bootstrap 3 grid offset 占用水平空间