Question

我正在尝试水平和垂直居中于填充了paticlesJS库的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;" 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>

Answer 1

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

<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>

div中的中心文本填充了particleJS

1 个答案: