Question

节日快乐，

我正在尝试将jquery ui手风琴用于我正在制作的网站。我希望手风琴在页面中心垂直和水平居中。我已经搜索了stackoverflow以获得问题的答案，但似乎没有任何东西可以使手风琴中心，它始终位于屏幕的最右侧。如何更改阴天主题的CSS以使手风琴居中？我为手风琴使用了以下代码结构：

<script type="text/javascript">
function centerIt(){
    var $accordion = $('.accordion');
    $accordion.css('top', ($(window).height() - $accordion.height())/2);
}
</script>
<meta charset="utf-8">
<title>Resume</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript" src="jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.11.4.custom/jquery-ui-1.11.4.custom/jquery-ui.min.js"></script>
<link type="text/css" rel="stylesheet" href="CSS/ResumePage.css">
<link type="text/css" rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<link type="text/css" rel="stylesheet" href="jquery-ui-1.11.4.custom/jquery-ui-1.11.4.custom/jquery-ui.theme.min.css">
<script type="text/javascript"> 
<!-- Google Code for Resume webite Conversion Page -->
<script type="text/javascript">
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]>=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-77421138-3', 'auto');
  ga('send', 'pageview');

</script>
<script type="text/javascript" src="//www.googleadservices.com/pagead/conversion.js">
</script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function()  {
           $("#accordion").accordion();
});
</script>
<div class="container" align="center">
<div class="navigation">
<ul class="navigation">
<li><a href="About_Me_Page1.html" title="About Me">About Me</a></li>
<li><a href="Resume_page.html" title="Resume Page">Resume</a></li>
<li><a href="References_page.html" title="Reference Page">References</a></li>
</ul>
</div>
<table align="center" cols="1" width="50%">
<div id="accordion" align="center">
<div class="contact" align="center">
<p class="contact">

感谢您的帮助。

Answer 1

您可以使用flexbox布局来执行您想要的操作

<style>
    #accordion-container {
        display: flex;
        justify-content: center;
        align-items: center;
    }
</style>
<div id="accordion-container">
   <div id="accordion"> ... </div>
</div>

This是一个非常有用的指南，您可以使用。

希望jquery手风琴居中，但总是正确对齐

1 个答案: