当我将 jQuery Accordion 居中时，它会将下一段转移到它的上侧答案

【问题标题】：When I am centering jQuery Accordion it is transferring the next paragraph to it's upper side当我将 jQuery Accordion 居中时，它会将下一段转移到它的上侧
【发布时间】：2021-07-11 13:40:02
【问题描述】：

我正在尝试使手风琴居中。起初我尝试使用margin: auto;，但它没有居中。然后我尝试了left: 50%; top: 50%; transform: translate(-50%, -50%);，它成功了，但我发现了一些问题。在手风琴之后有一段，放在手风琴之前。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.area {
  font-size: 20px;
  color: red;
  text-align: center;
  margin: 2% 0;
}


/* ========================== Accordion ==================================== */

.accordion {
  position: absolute;
  width: 70%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"></style>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jQuery UI</title>
  <link rel="stylesheet" href="./styles.css">
  <link rel="stylesheet" href="./jquery-ui-1.12.1/jquery-ui-1.12.1/jquery-ui.css">
  <link rel="stylesheet" href="./jquery-ui-1.12.1/jquery-ui-1.12.1/jquery-ui.structure.css">
  <link rel="stylesheet" href="./jquery-ui-1.12.1/jquery-ui-1.12.1/jquery-ui.theme.css">
</head>

<body>
  <p class="area">---------------------------- Accordion ----------------------------</p>
  <div class="accordion">
    <h2 class="accordion-title">Web Design</h2>
    <div>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi neque laborum sed repellat! Nemo dignissimos aliquid facilis aspernatur error neque repellat reiciendis praesentium eligendi iste perspiciatis quia ut voluptatibus, unde id, eaque libero
        corporis officia explicabo, doloremque vero culpa labore! Quae amet impedit maxime aspernatur nemo voluptates repudiandae minus, laborum dolores aperiam facilis, dolor ipsa tempore, illum quis possimus? Sit omnis minima velit recusandae debitis
        reiciendis commodi nulla perferendis est dolore consectetur porro, aut quam quidem quod aperiam, maxime, totam odit laboriosam tempore facere rem. Labore ex asperiores animi, perferendis sequi error! Ad iste exercitationem voluptate sint sapiente
        ipsum? A!</p>
    </div>

    <h2 class="accordion-title">Web Development</h2>
    <div>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi neque laborum sed repellat! Nemo dignissimos aliquid facilis aspernatur error neque repellat reiciendis praesentium eligendi iste perspiciatis quia ut voluptatibus, unde id, eaque libero
        corporis officia explicabo, doloremque vero culpa labore! Quae amet impedit maxime aspernatur nemo voluptates repudiandae minus, laborum dolores aperiam facilis, dolor ipsa tempore, illum quis possimus? Sit omnis minima velit recusandae debitis
        reiciendis commodi nulla perferendis est dolore consectetur porro, aut quam quidem quod aperiam, maxime, totam odit laboriosam tempore facere rem. Labore ex asperiores animi, perferendis sequi error! Ad iste exercitationem voluptate sint sapiente
        ipsum? A!</p>
    </div>

    <h2 class="accordion-title">Programming</h2>
    <div>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi neque laborum sed repellat! Nemo dignissimos aliquid facilis aspernatur error neque repellat reiciendis praesentium eligendi iste perspiciatis quia ut voluptatibus, unde id, eaque libero
        corporis officia explicabo, doloremque vero culpa labore! Quae amet impedit maxime aspernatur nemo voluptates repudiandae minus, laborum dolores aperiam facilis, dolor ipsa tempore, illum quis possimus? Sit omnis minima velit recusandae debitis
        reiciendis commodi nulla perferendis est dolore consectetur porro, aut quam quidem quod aperiam, maxime, totam odit laboriosam tempore facere rem. Labore ex asperiores animi, perferendis sequi error! Ad iste exercitationem voluptate sint sapiente
        ipsum? A!</p>
    </div>

    <h2 class="accordion-title">Wordpress Development</h2>
    <div>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi neque laborum sed repellat! Nemo dignissimos aliquid facilis aspernatur error neque repellat reiciendis praesentium eligendi iste perspiciatis quia ut voluptatibus, unde id, eaque libero
        corporis officia explicabo, doloremque vero culpa labore! Quae amet impedit maxime aspernatur nemo voluptates repudiandae minus, laborum dolores aperiam facilis, dolor ipsa tempore, illum quis possimus? Sit omnis minima velit recusandae debitis
        reiciendis commodi nulla perferendis est dolore consectetur porro, aut quam quidem quod aperiam, maxime, totam odit laboriosam tempore facere rem. Labore ex asperiores animi, perferendis sequi error! Ad iste exercitationem voluptate sint sapiente
        ipsum? A!</p>
    </div>

    <h2 class="accordion-title">Digital Marketing</h2>
    <div>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi neque laborum sed repellat! Nemo dignissimos aliquid facilis aspernatur error neque repellat reiciendis praesentium eligendi iste perspiciatis quia ut voluptatibus, unde id, eaque libero
        corporis officia explicabo, doloremque vero culpa labore! Quae amet impedit maxime aspernatur nemo voluptates repudiandae minus, laborum dolores aperiam facilis, dolor ipsa tempore, illum quis possimus? Sit omnis minima velit recusandae debitis
        reiciendis commodi nulla perferendis est dolore consectetur porro, aut quam quidem quod aperiam, maxime, totam odit laboriosam tempore facere rem. Labore ex asperiores animi, perferendis sequi error! Ad iste exercitationem voluptate sint sapiente
        ipsum? A!</p>
    </div>
  </div>
  <p class="area">----------------------------------------------------------------------</p>


  <!-- ------------------------- JavaScript Start ---------------------------------------- -->
  <script src="./jquery-3.6.0.js"></script>
  <script src="./jquery-ui-1.12.1/jquery-ui-1.12.1/jquery-ui.js"></script>
  <script>
    $(document).ready(function() {
      // --------------------------- Accordion ------------------------------------
      $(".accordion").accordion();
    });
  </script>
  <!-- ------------------------- JavaScript End ---------------------------------------- -->
</body>

</html>

手风琴前后各有一段。但在居中后，它们发生在顶部。

我下载了 jQuery 和 jQuery ui 文件。 jQuery 版本：3.6.0 和 jQuery ui 版本：1.12.1。

我该如何解决这个问题？

【问题讨论】：

标签： javascript jquery css jquery-ui

【解决方案1】：

您可以使用 css flex。它将解决您的问题。您所要做的就是用另一个 div 包装手风琴 div。

喜欢，

<div class="wrapper">
 <div class="accordion">
   .
   .
   .
 </div>
<div>

在css中


.wrapper{
    justify-content: center;
    display: flex;
}
.accordian{
  width: 70%;
}

请从手风琴类中删除所有其他 css 属性。它应该可以工作。

【讨论】：