javascript - 如何在绝对定位的列表元素中使文本居中对齐？

我有以下代码，

.testimonial-wrapper {
  background: green;
}

.testimonial {
  max-width: 980px;
  height: 70px;
  margin: auto;
  overflow: hidden;
  background: grey;
}

li {
  list-style: none;
  height: 70px;
}

.testimonial {
  position: relative;
}

li {
  position: absolute;
  top: 70px;
}

li.current{
  top: 0;
}

<div class="testimonial-wrapper">
    <div class="testimonial">
        <ul>
          <li class="current"><div>
            <p>This is the first test message</p>
            </div>
          </li>
          <li>
            <div>
            <p>I have nothing more to say</p>
          </div></li>
          <li><div>
            <p>again if i could i would</p>
          </div>
          </li>
        </ul>
    </div>
  </div>

我想将文本内容放在推荐容器内。我尝试了p {text-align: center}，但无济于事。我注意到，当li并非绝对定位时，text-align: center起作用。

我缺少什么，我该如何纠正？

最佳答案

如果您只想使用当前解决方案而不使用flexbox将其居中，则该方法应该起作用，当绝对定位元素时，它将不再具有某些默认属性，例如width：100％才能正常工作。

希望能帮助到你！

.testimonial-wrapper {
  background: green;
}

.testimonial {
  max-width: 980px;
  height: 70px;
  margin: auto;
  overflow: hidden;
  background: grey;
}

li {
  list-style: none;
  height: 70px;
}

.testimonial {
  position: relative;
}

li {
  position: absolute;
  top: 70px;
  text-align: center;
  width: 100%;
}

li.current{
  top: 0;
}

ul {
  list-style: none;
  padding-left: 0;
}

<div class="testimonial-wrapper">
    <div class="testimonial">
        <ul>
          <li class="current"><div>
            <p>This is the first test message</p>
            </div>
          </li>
          <li>
            <div>
            <p>I have nothing more to say</p>
          </div></li>
          <li><div>
            <p>again if i could i would</p>
          </div>
          </li>
        </ul>
    </div>
  </div>