How to align center an accordion in CSS?

There is an accordion on the left container of my webpage which is left aligned by default. I am using CSS to align it center. I have tried using position: center, align: left and margin-left: 5px in the CSS code but those are not working. Can anyone help me out. Thanks in advance.

There is an accordion on the left container of my webpage which is left aligned by default. I am using CSS to align it center. I have tried using position: center, align: left and margin-left: 5px in the CSS code but those are not working. Can anyone help me out. Thanks in advance.

Here is my code for CSS:

 var acc_leftpanel = document.getElementsByClassName("accordion_leftpanel"); var i; for (i = 0; i < acc_leftpanel.length; i++) { acc_leftpanel[i].onclick = function() { this.classList.toggle("active"); var panel = this.nextElementSibling; if (panel.style.maxHeight) { panel.style.maxHeight = null; } else { panel.style.maxHeight = panel.scrollHeight + 'px'; } } }
button.accordion_leftpanel { background-color: #2da0d9; color: #444; cursor: pointer; padding: 5px; width: 60%; border: none; align: center; text-align: center; outline: none; font-size: 12px; transition: 0.4s; border-radius: 25px; } button.accordion_leftpanel.active, button.accordion_leftpanel:hover { background-color: #5ebb61; } button.accordion_leftpanel:after { color: #ffffff; font-weight: bold; float: center; margin-left: 8px; }
<div class="leftcontentborder"> <p align="center">LIST OF SOLVED PAPERS</p> <button class="accordion_leftpanel" align="center">June 2014</button> <div class="panel"> <p>Paper 2</p> <p>Paper 3</p> </div> </div>
8

2 Answers

Center using using margin, margin: 0 auto;

Also, check out https://developer.mozilla.org/en-US/docs/Web/CSS

You can add a class to your CSS if you want to center the all inside leftcontentborder.

.leftcontentborder { text-align: center; } 

ncG1vNJzZmirpJawrLvVnqmfpJ%2Bse6S7zGiorp2jqbawutJoa2pxZmd%2BdYOOoaawZaSkeqK4yKClZpuVo8GmvoyapWaZk5i8s7DIqKVmoZ5isLS%2F

 Share!