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