在 grid 容器内的 flex 容器内居中 p 元素

Question

我正在尝试将 p 元素置于网格容器第二行内的弹性容器中。

我试过将 p 元素内联，但没有成功。弹性容器中心内的 ul 元素，但 p 元素却没有，这真的很奇怪。

代码如下：

.accordion {
  width: 800px;
  margin: 100px auto;
}
.accordion-item {
  display: grid;
  grid-template-columns: repeat(3, auto);
  align-items: center;
  justify-items: center;

  gap: 2rem;

  padding: 1rem;
  box-shadow: 0 0.5rem 0.5rem rgba(0, 0, 0, 0.5);
}
.hidden-box {
  grid-column: 2/3;
  display: flex;
  flex-direction: column;
  align-items: center;
}

  <body>
    <section class="accordion">
      <div class="accordion-item">
        <span>01</span>
        <h2>Where are these chairs assembled?</h2>
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="arrow-icon"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
          stroke-width="2"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            d="M15 13l-3 3m0 0l-3-3m3 3V8m0 13a9 9 0 110-18 9 9 0 010 18z"
          />
        </svg>
        <div class="hidden-box">
          <p>
            Lorem ipsum dolor sit, amet consectetur badipisicing elit. Dolorem
            nulla voluptatibus vel temporibus voluptates illo quaerat?
            Repudiandae eum exercitationem quisquam!
          </p>
          <ul>
            <li>Lorem ipsum dolor sit amet consectetur.</li>
            <li>Lorem ipsum dolor sit amet consectetur.</li>
            <li>Lorem ipsum dolor sit amet consectetur.</li>
            <li>Lorem ipsum dolor sit amet consectetur.</li>
          </ul>
        </div>
      </div>
      <!-- <div class="accordion-item"></div>
      <div class="accordion-item"></div> -->
    </section>
  </body>
</html>

Answer 1

通过居中 p 元素 如果你是这个意思 -

然后加上text-align属性达到同样的效果-

.hidden-box {
   text-align: center;
 }

在 grid 容器内的 flex 容器内居中 p 元素

centering p element inside flex container inside grid container

html

css

flexbox

css-grid