在按钮内居中对齐“:after plus/minus sign”

Question

我使用的是一个由按钮组成的手风琴，我有'加号'和'减号'作为'：之后'到目前为止，我已经在按钮中尝试了“justify-content: center”，我也尝试过“vertical-align: middle”，但都没有任何效果，当我试图在按钮周围包裹一个 div 来实现样式时那个按钮，它停止了手风琴的工作。在薄屏幕上，当加号进入文本时，我也遇到了麻烦，它目前向右浮动，但它们之间没有指定的空间来停止交叉。我试图用来集中对齐这个元素的所有代码我都没有工作，请看下面：这是代码：]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>

Answer 1

也许这可以帮助你。我添加了一个<span>due 来控制两个部分然后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>

Answer 2

这个答案是基于相关 css 属性的实际行为来实现减号和加号在按钮内的垂直对齐（我没有尝试过其他元素，如 span 或 div，但我相信它的工作原理是一样的，如果不是请原谅我的猜测) 增加字体大小（在任何程度上），而不管使用的字体系列。

将此视为 Alberto Rhuetras 已经回答的替代方案。

用例：有时你想要更大的按钮，里面有加号或减号。但是字体大小对于按钮来说太小了。当您增加按钮的字体大小时，加号和减号无法像我一样垂直对齐。那是我想出以下解决方案的时候。

注意：我在其他任何地方都找不到解决方案，所以我最终找到了这个解决方案。我愿意接受任何关于解决方案的说法，所以请随时发表一些评论:)

/* common style */

.minus, .plus {

   height: 50px;

   width: 200px;

   background: #216AFF;

   color: white;

}

.minus {

  font-size: 70px;

  display: flex;

  justify-content: center;

  line-height: 35px;

}

.plus {

  font-size: 50px;

  display: flex;

  justify-content: center;

  line-height: 45px;

}

.demo {

  font-size: 18px;

  padding: 18px;

  width: 100%;

  text-align: left;

  display: flex;

}

.demo::after {

  content: "\02795";

  font-size: 18px;

  float: right;

  line-height: 23px;

  justify-content: center;

  align-content: flex-start;

}

<button class="minus">-</button>

<br>

<button class="plus">+</button>

<br>

<button class="demo">Does the product have a specific method of operation? Is it easy to use? What is the warranty and return policy?</button>

在按钮上使用 display-flex 并使用 line-height 的值在按钮内垂直放置加号或减号。行高值的增加会使符号向下移动，而行高值的减小会使符号向上移动。谢谢！