SVGs在按键+词

有一些基本的东西，我似乎缺少有关的按钮。在我的梦幻世界中，我可以有一行按钮，只有SVG，SVG +文本，或者只是文本，他们都住在同一个空间。SVGs在按键+词

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图标居中。

如果标签上的按钮，就可以看到文本内容的按钮的外侧延伸，但我似乎无法找出原因既字体大小和行应该是相同的。

这里的工作示例的codepen一起玩：https://codepen.io/theaemarie/pen/RGAwZj

来源

2017-09-18 theaemarie

秘密你错过了是vertical-align: middle上button，其垂直对齐的图像在文本旁边。

我创建了更新的笔展示此here。

希望这会有所帮助！ :)

来源

2017-09-18 20:15:06

哦。我的。哇。如此令人困惑，因为弹性盒的“align-items：center”并不是在做。我想到的本质上是一回事。另外，当我在过去尝试过'vertical-align：middle'时，它永远不会那么容易。 – theaemarie

太棒了;很高兴有帮助。为了'垂直align'工作，元件需要被沿着基线设置（'inline'，'直列block'或'直列flex'）。如果过去它不适合你，你可能没有正确的'display'属性。还有上一大篇[** **这里（https://css-tricks.com/what-is-vertical-align/）如果你正在寻找一些更多的信息:) –

一旦你确认这可以解决您的问题，请不要忘记点击表决按钮下方的灰色检查来将[**标记为已接受**]（https://stackoverflow.com/help/someone-answers）这会将其从“未答复的问题”队列中移除，并向问题提问者和问题答疑者授予声誉。询问任何问题后，您可以在15分钟内完成。当然，在说，你没有义务标记我的答案（或任何其他人）是正确的，但标记为已解决的问题有助于保持事情顺利进行:) –

SVGs在按键+词

回答

相关问题