Центрировать текст внутри элемента, заполненного частицамиJS - PullRequest
Новая
       9

Центрировать текст внутри элемента, заполненного частицамиJS

0 голосов
/ 05 июня 2018

Я пытаюсь расположить текст по центру внутри div, заполненный библиотекой paticlesJS, по горизонтали и по вертикали.Я использую метод flex-box, но почему-то 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>

1 Ответ

0 голосов
/ 05 июня 2018

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