当我将 jQuery Accordion 居中时，它会将下一段转移到它的上侧
Posted
技术标签:
【中文标题】当我将 jQuery Accordion 居中时，它会将下一段转移到它的上侧【英文标题】：When I am centering jQuery Accordion it is transferring the next paragraph to it's upper side 【发布时间】：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。
我该如何解决这个问题？
【问题讨论】：
【参考方案1】：您可以使用 css flex。它将解决您的问题。您所要做的就是用另一个 div 包装手风琴 div。
喜欢，
<div class="wrapper">
<div class="accordion">
.
.
.
</div>
<div>
在css中
.wrapper
justify-content: center;
display: flex;
.accordian
width: 70%;
请从手风琴类中删除所有其他 css 属性。它应该可以工作。
【讨论】：
以上是关于当我将 jQuery Accordion 居中时，它会将下一段转移到它的上侧的主要内容，如果未能解决你的问题，请参考以下文章
当训练数据居中时，XGBoost 和随机森林导致对测试集的持续预测
使用Semantic UI Accordion和JQuery UI Accordion时发生冲突
jQuery Accordion 功能面板在不应该打开时打开