css - 按钮内部的跨度占据整个高度

Question

我有一个按钮，里面有一个跨度图标。我希望图标以按钮内的文本为中心更加垂直，但跨度占据了按钮的整个高度。这样，当我将 margin-top 与文本放在一起时，文本也会移动。

https://jsfiddle.net/DTcHh/26184/

我放了 background-color:red; 来显示我的问题。

我不认为给它一个标准的高度是一个干净的修复。

button {
  height: 50px;
  display: inline-block;
  margin: 0;
  padding: 0px 40px;
  position: relative;
  z-index: 1;
}
span.glyphicon-envelope {
  padding-left: 20px;
  background-color: red;
  display: inline-block;
  line-height: 50px;
  font-size: 18px;
  ;
}

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<button>
  Send
  <span class="glyphicon-envelope"></span>
</button>

Answer 1

尝试删除 line-height: 50px;。您的 jsfiddle 似乎还指向其他内容？

span.glyphicon-envelope {
  padding-left: 20px;
  background-color: red;
  display: inline-block;
  font-size: 18px;
  position: relative;
  top: 2px;
}