我正在尝试复制www.codecademy.com的标题，但我遇到了“升级到专业版”按钮的问题。根据我正在关注的教程，我只是使用a，因为它纯粹是视觉效果。
为了使<span>居中，我使用line-height: 50px 50px是它所放置的标题的高度。一切都很好，直到我添加边框... line-height为代码，边框采用父级的高度（标题为50px），而不是像<span>一样包裹line-height。
让JSFiddle结果屏幕变大，看看我的意思：
线高是我可以垂直居中的唯一方式，没有其他办法可以帮助我。
如何在保持行高的同时围绕跨度包裹边框？
答案 0 :(得分：1)
而不是：
<span id="span1">Catalog</span>
<span id="span1">Community</span>
<span id="spanUpgrade">Upgrade to Pro</span>
你可以这样做：
<span class="span1">Catalog</span>
<span class="span1">Community</span>
<span class="span1"><span id="spanUpgrade">Upgrade to Pro</span></span>
span1是一个菜单项，spanUpgrade是特定于某个项目的内容。