How to align center an accordion in CSS?

Question

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> 

Answer 1

Center using using margin, margin: 0 auto;

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

Answer 2

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

.leftcontentborder {
        text-align: center;
}