Question

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

我已让background-color:red;显示我的问题。

我认为给它一个标准的高度是一个干净的解决方案。

＆＃13;

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;
  ;
}

＆＃13;

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

＆＃13;

Answer 1

您也可以这样做：

span.glyphicon-envelope {
position: relative;
top: 2px;
}

更改top属性的值会上下移动（显然也可以使用bottom）。

如果您不想更改信封的任何其他属性，这是一个简单的解决方案。

Answer 2

尝试删除line-height: 50px;。你的jsfiddle还指向其他东西吗？

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

Answer 3

降低行高并删除span.glyphicon-envelope中的填充

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

将button显示更改为表格单元格，并将vertical-align: middle添加到范围glyphicon-envelope

button {
  height: 50px;
  display: table-cell;
  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;
  vertical-align: middle;
}

查看示例：https://jsfiddle.net/pdz696pv/2/

内部按钮跨度占整个高度

4 个答案: