在填充粒子的 div 内居中文本JS



>我正在尝试在充满paticlesJS库的div中水平和垂直居中文本。我正在使用弹性框方法,但由于某种原因,justify-content:center 不起作用。你能借给我一个线索,这是怎么回事吗?提前谢谢。这是小代码:

<div style="position: relative; height: 600px;" id="sectionParticles" class="outer">
<div style="color:white; width: 100%; background-color: rgb(39,50,82); height: 600px; display: flex;align-items: center; justify-content: center;" id="particles-js" class="middle">
<p style="height: 300px;" class="inner">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio ex voluptatibus velit sequi ad! Optio deserunt, fugiat excepturi reprehenderit, quaerat, voluptatum facilis fugit explicabo laborum provident consectetur animi officiis, qui! Lorem
ipsum dolor sit amet </p>
</div>
</div>

那么 p 标签肯定是居中的,如果你想在<p>内居中文本,请使用与该div 相同的样式。

<div style="position: relative; height: 600px;" id="sectionParticles" class="outer">
<div style="color:white;width: 100%;background-color: rgb(39,50,82);height: 600px;display: flex;align-items: center;justify-content: center;" id="particles-js" class="middle">
<p style="height: 300px;display: flex;align-items: center;justify-content: center;" class="inner">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio ex voluptatibus velit sequi ad! Optio deserunt, fugiat excepturi reprehenderit, quaerat, voluptatum facilis fugit explicabo laborum provident consectetur animi officiis, qui! Lorem
ipsum dolor sit amet </p>
</div>
</div>

最新更新