html - 无法在特定的 div 中向上移动此文本

Question

我想把这段文字在一个div中向上移动，使它看起来统一，但我做不到。在粒子类中，我将位置更改为绝对位置，但这会导致其他 div 上的文本重叠到这个上。我尝试在有关 p 类的部分中添加 padding-bottom: 30px; 但这只会增加顶部的 div 大小。

#particles {
  width: 100%;
  height: 300px;
  position: relative;
  overflow: hidden;
  background: #00a1de;
}
section.about {
  position: absolute;
  left: 0;
  top: 50%;
  padding: 0 10px;
  width: 100%;
  text-align: center;
}
section.about p {
  font-size: 26px;
  line-height: 1.5em;
  color: white;
  margin: 0;
  text-align: center;
  font-weight: 300;
}

<div id="particles">
  <section class="container-fluid about">
    <div class="container">
      <div class="row">
        <div class="col-md-12">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin congue vel erat sed efficitur. Nullam vitae sagittis nisi. In vulputate sit amet lorem at pharetra. Nam a imperdiet augue. Vivamus hendrerit ex id congue bibendum</p>
        </div>
      </div>
    </div>
  </section>
</div>

Answer 1

移除绝对位置。

section.about {
/*position: absolute;*/
left: 0;
/*top: 50%;*/
padding: 0 10px;
width: 100%;
text-align: center;
}