我如何使这个手风琴响应并同时在页面上居中？

Question

我正在构建的常见问题解答部分正在使用 React，现在我加载了 react-faq-component 库（标题和内容只是它附带的默认值）：


import Faq from 'react-faq-component';

const data = {
  title: "FAQ (How it works)",
  rows: [
    {
      title: "Lorem ipsum dolor sit amet,",
      content: "Lorem ipsum dolor sit amet, consectetur "
    },
    {
      title: "Nunc maximus, magna at ultricies elementum",
      content: "Nunc maximus, magna at ultricies elementum, risus turpis vulputate quam."
    },
    {
      title: "Curabitur laoreet, mauris vel blandit fringilla",
      content: "Curabitur laoreet, mauris vel blandit fringilla, leo elit rhoncus nunc"
    },
    {
      title: "What is the package version",
      content: "v1.0.5"
    }]
}

const FAQ = () => {
    return (
        <div>
             <Faq data={data}/>
        </div>
    )
}

export default FAQ

我将如何着手使它响应移动设备并将手风琴放在页面的中心？我假设它在样式中使用了 align-items: center; 但不起作用。

Answer 1

最终输出：

import React from "react";
import "./style.css";
import Faq from "react-faq-component";

const data = {
  title: "FAQ (How it works)",
  rows: [
    {
      title: "Lorem ipsum dolor sit amet,",
      content: "Lorem ipsum dolor sit amet, consectetur "
    },
    {
      title: "Nunc maximus, magna at ultricies elementum",
      content:
        "Nunc maximus, magna at ultricies elementum, risus turpis vulputate quam."
    },
    {
      title: "Curabitur laoreet, mauris vel blandit fringilla",
      content:
        "Curabitur laoreet, mauris vel blandit fringilla, leo elit rhoncus nunc"
    },
    {
      title: "What is the package version",
      content: "v1.0.5"
    }
  ]
};

const FAQ = () => {
  return (
    <div className="main">
      <div className="faq">
        <Faq data={data} />
      </div>
    </div>
  );
};

export default FAQ;

为 Faq 组件指定 max-width，并赋予 main 父级 div css 样式如下：

css:

h1,
p {
  font-family: Lato;
}

.main {
  display: flex;
  width: 100%;
  padding-top: 10px;
  justify-content: center;
}
.faq {
  max-width: 400px;
}

工作演示：Stackblitz

我如何使这个手风琴响应并同时在页面上居中？

How would I make this accordion responsive and also centered on the page?

reactjs

accordion