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.

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> <p align="center">LIST OF SOLVED PAPERS</p> <button align="center">June 2014</button> <div> <p>Paper 2</p> <p>Paper 3</p> </div>
</div>

2 Answers

Center using using margin, margin: 0 auto;

Also, check out

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

.leftcontentborder { text-align: center;
}