想要jquery手風琴居中但始終對齊

節日快樂，想要jquery手風琴居中但始終對齊

我正在嘗試爲我的網站使用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">

感謝您的幫助。

來源

2016-12-26 bsayles12

您可以使用Flexbox的佈局做你想做的事

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

This是一個非常有益的指導，你可以使用的東西。

來源

2016-12-26 04:10:07

想要jquery手風琴居中但始終對齊

回答

相關問題