CODEWITHSUNDEEP
javascriptcss
PS Nayak
PS Nayak

Reputation: 421

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 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>

Upvotes: 0

Views: 3106

Answers (2)

aljoscha
aljoscha

Reputation: 344

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

.leftcontentborder {
        text-align: center;
}

Upvotes: 0

Lex
Lex

Reputation: 184

Center using using margin, margin: 0 auto;

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

Upvotes: 1

Related Questions