Bootstrap 3折叠按钮中图片与文字的对齐问题咨询

在Bootstrap 3中，使用按钮实现div折叠功能，通过:before伪元素动态切换按钮内容为“+ More”和“- Less”（对应plusImage.svg和minusImage.svg图标），但图标与文字出现错位，如何实现按钮内图标与文字的对齐？

代码示例 #

CSS

button.btn.collapsed:before {
  content: url('plusImage.svg') " More";
}

button.btn:before {
  content: url('minusImage.svg') " Less";
}

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseMoreDetails"></button>

解决方案 #

方法1：通过vertical-align直接对齐 #

给伪元素设置垂直对齐属性，让图标和文字处于同一基线，还可按需添加图标与文字的间距：

button.btn:before,
button.btn.collapsed:before {
  vertical-align: middle;
  margin-right: 4px; /* 可选：增加图标与文字的间距 */
}

button.btn.collapsed:before {
  content: url('plusImage.svg') " More";
}

button.btn:before {
  content: url('minusImage.svg') " Less";
}

方法2：改用背景图实现图标（更灵活可控） #

避免直接用content插入图片带来的对齐问题，将图标设为伪元素的背景图，单独控制文字内容：

button.btn:before,
button.btn.collapsed:before {
  display: inline-block;
  width: 16px; /* 匹配你的图标宽度 */
  height: 16px; /* 匹配你的图标高度 */
  margin-right: 4px;
  vertical-align: middle;
  content: "";
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

button.btn.collapsed:before {
  background-image: url('plusImage.svg');
  content: " More";
}

button.btn:before {
  background-image: url('minusImage.svg');
  content: " Less";
}

方法3：用inline-block配合行高对齐 #

将伪元素设为行内块级元素，通过行高匹配图标高度，确保垂直居中：

button.btn:before,
button.btn.collapsed:before {
  display: inline-block;
  line-height: 16px; /* 和图标高度保持一致 */
  vertical-align: top;
}

button.btn.collapsed:before {
  content: url('plusImage.svg') " More";
}

button.btn:before {
  content: url('minusImage.svg') " Less";
}

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