SVGs +按钮中的单词

Question

我似乎缺少关于按钮的基本功能。在我的梦想世界中，我可以有一系列按钮，只有SVG，SVG +文本，或者只是文本，它们都存在于同一个空间中。

HTML：

<div class="container">
  <button><svg class="icon"><use xlink:href="#icon-twitter-retweet" /></svg></button>
  <button><svg class="icon"><use xlink:href="#icon-twitter-fav" /></svg> Words</button>
  <button>Words</button>
</div>

CSS：

button {
  display: inline-flex;
  padding: 0px 10px;
  font-size: 50px;
  line-height: 1;
}
.icon {
  width: 1em;
  height: 1em;
}

我似乎无法让所有人在行中齐心协力，并让SVG图标居中。

如果选中按钮，则可以看到文本内容扩展到按钮之外，但我似乎无法弄清楚为什么字体大小和行高应该相同。

  

这是一个可以解决的工作示例的代码：https://codepen.io/theaemarie/pen/RGAwZj

Answer 1

您遗失的秘密是button上的 vertical-align: middle ，它会垂直对齐文字旁边的图片。

我创建了一个更新的笔，展示了 here 。

希望这有帮助！ ：）