带有svg文本对齐方式的引导程序3图标按钮

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

只需在。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>

Answer 2

您可以在没有标准bootsrap 3样式的情况下进行尝试，因为vertical-align: middle没有BS类