Текст центра внутри div, заполненный частицамиJS

Julio Rodriguez спросил: 12 мая 2018 в 04:37 в: html

Я пытаюсь горизонтально и вертикально центрировать текст внутри div, заполненного библиотекой paticlesJS. Я использую метод flex-box, но почему-то оправдывающий контент: центр не работает. Можете ли вы дать мне понять, что это такое? Заранее спасибо. Вот небольшой код:

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

1 ответ

Есть решение

ZohirSalak CeNa ответил: 12 мая 2018 в 01:27

Хорошо, что тег 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>