当我将 jQuery 手风琴居中时，它会将下一段转移到它的上侧

Question

我正在尝试将手风琴居中。起初我尝试使用 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.

我该如何解决这个问题？

Answer 1

您可以使用 css 弹性。它将解决您的问题。您所要做的就是用另一个 div.

包裹手风琴 div

喜欢，

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

在css


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

请从 accordian class 中删除所有其他 css 属性。它应该可以工作。

当我将 jQuery 手风琴居中时，它会将下一段转移到它的上侧

When I am centering jQuery Accordion it is transferring the next paragraph to it's upper side

javascript

css

jquery

jquery-ui