0

I'm trying to horizontally and center vertically a text inside a div filled with the paticlesJS library. I'm using the flex-box method, but for some reason justify-content:center is not working. Can you lend me a clue about what is this happening? Thanks in advance. Here is the little code:

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

4

1 回答 1

1

well the p Tag is definitely centered, if you want to center the text inside the <p> use the same styling you used on the that 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>

于 2018-06-05T18:22:34.387 回答