Align ':after plus/minus sign' Centrally Within Button

Issue

I'm using an Accordion which is built of buttons, I've got the 'plus' and 'minus' signs as ':after'

So far I've tried 'justify-content: center' within the button, I've also tried 'vertical-align: middle', neither had any effect and when I tried to wrap a div around the button to implement the styling on that button, it stopped the accordion from working.

I also am having trouble when on a thin screen the plus sign is coming into the text, it's currently floating to the right but there is no designated space between them to stop a crossover.

All the code I've tried to use to centrally align this element i haven't got to work, please see below:

Here is the code:]

HTML:

      <button class="accordion">Where is your company located?</button>
<div class="panel">
<p class="zpa-regular2">We are located in the heart of San Francisco, California USA! We do have shipping warehouses located in the USA, Europe, and Asia to ensure the quickest delivery for your location.</p>
</div>
  
  <button class="accordion">What is the warranty and return policy?</button>
<div class="panel">
<p class="zpa-regular2"><span>We have a Risk-Free Policy. During this promotion - you can try the product for 30 days - if you decide for whatever reason this is not for you then you can return the device for a full refund.</span></p>
</div>
  
  <button class="accordion">Does the product have a specific method of operation? Is it easy to use?</button>
<div class="panel">
<p class="zpa-regular2">Yes! It is very simple and easy to use. You will receive a detailed user manual with positions and pointers to maximize your results. :)</p>
</div>

CSS:

.accordion {
  background-color: white;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  text-align: left;
  border: none;
  outline: none;
  transition: 0.4s;
  color: #262626;
  font-size: 18px;
  font-weight: 700;
  font-style: normal;
  font-family: 'Lato';
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .accordion:hover {
  background-color: white;
}

/* Style the accordion panel. Note: hidden by default */
.panel {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}


.accordion:after {
  content: '\02795'; /* Unicode character for "plus" sign (+) */
  font-size: 18px;
  font-family: 'Lato';
  color: #262626;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2796"; /* Unicode character for "minus" sign (-) */
}

The javascript, incase it helps at all:

var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight) {
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    }
  });
}

Thanks if you can help.

Dale.

Solution

May be this can help you. I added an <span> due to control both parts and then display: flex;

var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight) {
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    }
  });
}

.accordion {
  background-color: red;
  color: #444;
  cursor: pointer;
  width: 100%;
  text-align: left;
  outline: none;
  transition: 0.4s;
  color: #262626;
  font-size: 18px;
  font-weight: 700;
  font-style: normal;
  font-family: 'Lato';
  border: 0;
margin: 0;
display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .accordion:hover {
  background-color: white;
}

/* Style the accordion panel. Note: hidden by default */
.panel {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}


.accordion span:after {
  content: '\02795'; /* Unicode character for "plus" sign (+) */
  font-size: 18px;
  font-family: 'Lato';
  color: #262626;
  padding-left: 20px;
}

.accordion.active span:after {
  content: "\2796"; /* Unicode character for "minus" sign (-) */
}

      <button class="accordion">Where is your company located? <span></span></button>
<div class="panel">
<p class="zpa-regular2">We are located in the heart of San Francisco, California USA! We do have shipping warehouses located in the USA, Europe, and Asia to ensure the quickest delivery for your location.</p>
</div>
  
  <button class="accordion">What is the warranty and return policy?<span></span></button>
<div class="panel">
<p class="zpa-regular2"><span>We have a Risk-Free Policy. During this promotion - you can try the product for 30 days - if you decide for whatever reason this is not for you then you can return the device for a full refund.</span></p>
</div>
  
  <button class="accordion">Does the product have a specific method of operation? Is it easy to use?<span></span></button>
<div class="panel">
<p class="zpa-regular2">Yes! It is very simple and easy to use. You will receive a detailed user manual with positions and pointers to maximize your results. :)</p>
</div>

Answered By - Alberto Rhuertas