Question

我正在尝试将一个glyphicon放在bootstrap按钮中。当我减小按钮的宽度/高度时，glyphicon不再保持居中，垂直或水平。我可以使用position：relative。

来修复水平位置

但是，我无法弄清楚如何解决它的垂直定位。

这是HTML的样子：

<button type="button" class="btn btn-default add-podcast-btn">
  <span class="glyphicon glyphicon-plus glyphicon-center"></span>
</button>

这就是CSS的样子：

.add-podcast-btn {
  font-size: 11px;
  text-align: center;
  width: 25px;
  height: 25px;
}

.glyphicon-center {
  position: relative;
  right: 4.5px;
}

我已经包含了一个PLNKR来展示最新情况： {{3}}

Answer 1

如果您使用预定义的自举按钮尺寸，则无需手动调整按钮的高度。

<link data-require="bootstrap-css@3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />

<button type="button" class="btn btn-lg btn-default add-podcast-btn">
  <span class="glyphicon glyphicon-plus glyphicon-center"></span>
</button>
<button type="button" class="btn btn-default add-podcast-btn">
  <span class="glyphicon glyphicon-plus glyphicon-center"></span>
</button>
<button type="button" class="btn btn-sm btn-default add-podcast-btn">
  <span class="glyphicon glyphicon-plus glyphicon-center"></span>
</button>
<button type="button" class="btn btn-xs btn-default add-podcast-btn">
  <span class="glyphicon glyphicon-plus glyphicon-center"></span>
</button>

<br/>

<button type="button" class="btn btn-lg btn-default add-podcast-btn">
  <span class="glyphicon glyphicon-plus glyphicon-center"></span> Add podcast
</button>

<br/>

<button type="button" class="btn btn-default add-podcast-btn">
  <span class="glyphicon glyphicon-plus glyphicon-center"></span> Add podcast
</button>

<br/>

<button type="button" class="btn btn-sm btn-default add-podcast-btn">
  <span class="glyphicon glyphicon-plus glyphicon-center"></span> Add podcast
</button>

<br/>

<button type="button" class="btn btn-xs btn-default add-podcast-btn">
  <span class="glyphicon glyphicon-plus glyphicon-center"></span> Add podcast
</button>

Answer 2

试试这个http://plnkr.co/edit/06lYcyqGYn5IC6U9N3uR?p=preview

.add-podcast-btn {
  margin-top: 100px;
  margin-left: 100px;
  font-size: 11px;
  text-align: center;
  width: 25px;
  height: 25px;
  position: relative;
}

.glyphicon-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Answer 3

试试这一行。

<button class="btn btn-default glyphicon glyphicon-plus"></button>

如何在Bootstrap按钮中垂直居中Glyphicon

3 个答案: