bootstrap 3 图标按钮与 svg 文本对齐

Question

我在我的项目中使用 bootstrap 3 和一些 svg 图标。使用 svg 图标的按钮上的文本出现在按钮的右下角而不是按钮的中间。

按钮代码是

<button class="btn"><svg class="icon"><use xlink:href="#play-button-1"/></svg>Previous</button>

按钮 css 是

.btn {
  background-color: #ff9800;
  border: none;
  color: white;
  padding: 12px 16px;
  font-size: 16px;
  cursor: pointer;
}

从站点复制图标按钮的代码。

Answer 1

你可以在没有标准 bootstrap 3 样式的情况下尝试，因为 vertical-align: middle

没有 BS class

<button class="btn"><svg class="icon"><use xlink:href="#play-button-1"/></svg><span>Previous</span></button>
<!-- some extra span around the text -->

和

.btn {
  background-color: #ff9800;
  border: none;
  color: white;
  padding: 12px 16px;
  font-size: 16px;
  cursor: pointer;
}
.btn svg, .btn span {
  display: inline-block;
  vertical-align: middle;
}

Answer 2

只需在 .btn{}

中添加 display:grid;

.btn {
  background-color: #ff9800;
  border: none;
  color: white;
  padding: 12px 16px;
  font-size: 16px;
  cursor: pointer;
  display:grid;
  
}

<button class="btn"><svg class="icon"><use xlink:href="#play-button-1"/></svg>Previous</button>

bootstrap 3 图标按钮与 svg 文本对齐

bootstrap 3 icon button with svg text align

html

css

svg

twitter-bootstrap-3