在按钮内居中对齐“: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++) {&nbsp; acc[i].addEventListener("click", function() {&nbsp; &nbsp; this.classList.toggle("active");&nbsp; &nbsp; var panel = this.nextElementSibling;&nbsp; &nbsp; if (panel.style.maxHeight) {&nbsp; &nbsp; &nbsp; panel.style.maxHeight = null;&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; panel.style.maxHeight = panel.scrollHeight + "px";&nbsp; &nbsp; }&nbsp; });}.accordion {&nbsp; background-color: red;&nbsp; color: #444;&nbsp; cursor: pointer;&nbsp; width: 100%;&nbsp; text-align: left;&nbsp; outline: none;&nbsp; transition: 0.4s;&nbsp; color: #262626;&nbsp; font-size: 18px;&nbsp; font-weight: 700;&nbsp; font-style: normal;&nbsp; font-family: 'Lato';&nbsp; border: 0;margin: 0;display: flex;&nbsp; justify-content: space-between;&nbsp; align-items: center;&nbsp; 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 {&nbsp; background-color: white;}/* Style the accordion panel. Note: hidden by default */.panel {&nbsp; padding: 0 18px;&nbsp; background-color: white;&nbsp; max-height: 0;&nbsp; overflow: hidden;&nbsp; transition: max-height 0.2s ease-out;}.accordion span:after {&nbsp; content: '\02795'; /* Unicode character for "plus" sign (+) */&nbsp; font-size: 18px;&nbsp; font-family: 'Lato';&nbsp; color: #262626;&nbsp; padding-left: 20px;}.accordion.active span:after {&nbsp; content: "\2796"; /* Unicode character for "minus" sign (-) */}&nbsp; &nbsp; &nbsp; <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>&nbsp;&nbsp;&nbsp; <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>&nbsp;&nbsp;&nbsp; <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 {&nbsp; &nbsp;height: 50px;&nbsp; &nbsp;width: 200px;&nbsp; &nbsp;background: #216AFF;&nbsp; &nbsp;color: white;}.minus {&nbsp; font-size: 70px;&nbsp; display: flex;&nbsp; justify-content: center;&nbsp; line-height: 35px;}.plus {&nbsp; font-size: 50px;&nbsp; display: flex;&nbsp; justify-content: center;&nbsp; line-height: 45px;}.demo {&nbsp; font-size: 18px;&nbsp; padding: 18px;&nbsp; width: 100%;&nbsp; text-align: left;&nbsp; display: flex;}.demo::after {&nbsp; content: "\02795";&nbsp; font-size: 18px;&nbsp; float: right;&nbsp; line-height: 23px;&nbsp; justify-content: center;&nbsp; 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 的值在按钮内垂直放置加号或减号。行高值的增加会使符号向下移动，而行高值的减小会使符号向上移动。谢谢！