带Glyphicon的按钮与文本按钮对齐异常，如何实现正确对齐？

嘿，我来帮你搞定这个按钮对齐的麻烦！从你的描述来看，问题出在Glyphicon图标作为内联元素，和文本在垂直对齐的默认表现上不一样，而且你的按钮代码里还有个小问题——重复的onclick属性，这不仅会导致事件触发异常，也可能间接影响布局。

下面给你几个更优雅的解决方案，比手动调padding靠谱多了：

方案1：利用Bootstrap内置的Flex工具类 #

Bootstrap本身就有现成的类来实现垂直居中，直接给按钮加上d-flex align-items-center justify-content-center，这样不管是图标还是文本，都会自动在按钮里居中对齐：

document.getElementById('column_4').innerHTML += '<div class="col-md-auto"> <button type="button" id="' + array13[prop] + '" name="Rec_Status" onclick="gotovendor(0); myFunction7(this.value)" value="' + array13[prop] + '" class="list-group-item d-flex align-items-center justify-content-center"><span class="glyphicon glyphicon-tasks" aria-hidden="true"></span></button></div>';

注意：我把两个onclick合并成了一个，避免重复绑定事件的问题，这很重要！

方案2：给Glyphicon添加垂直对齐样式 #

如果不想用flex类，也可以直接给图标span设置vertical-align，让它和文本的基线对齐：

document.getElementById('column_4').innerHTML += '<div class="col-md-auto"> <button type="button" id="' + array13[prop] + '" name="Rec_Status" onclick="gotovendor(0); myFunction7(this.value)" value="' + array13[prop] + '" class="list-group-item"><span class="glyphicon glyphicon-tasks" aria-hidden="true" style="vertical-align: middle;"></span></button></div>';

或者把这个样式写到CSS里，避免内联样式的混乱：

.glyphicon {
  vertical-align: middle;
}

为什么padding不是理想方案？ #

手动调整padding只是“硬凑”对齐效果，在不同屏幕尺寸（比如移动端、大屏）下，按钮的大小变化后，padding的数值可能就不合适了，导致对齐再次失效。而上面的两种方法是从内容对齐的逻辑出发，不管按钮大小怎么变，图标都会自动居中，适配性更强。

你可以先试试方案1，因为Bootstrap的flex工具类是专门为这种布局场景设计的，最省心！

内容的提问来源于stack exchange，提问作者Subhaac