使用图标和文本垂直居中的 Bootstrap <a> 标签按钮

Question

我想要垂直居中对于 Bootstrap 的 <a> 标签按钮的图标和文本。我的样式段落只适用于 <button> 标签，但不适用于 <a> 标签。

在下面的片段中: - "User" 按钮使用 <button> 来执行（我期望的样式！） - "Mail" 按钮使用 <a> 标签来执行。

请注意： - 无法修改 HTML 代码。 - 无法给图标或文本指定固定的外边距，因为按钮内可能有多行文本。

.btn-giant {
  display: inline-block;
  width: 120px;
  height: 120px;
  margin-bottom: 8px;
  margin-right: 5px;
  padding: 10px 15px;
  font-size: 12px;
  text-align: center;
  color: white;
  border-radius: 0;
  white-space: normal;
}

.btn-giant .glyphicon {
  font-size: 36px;
  display: block;
  margin-bottom: .3em;
}

<link href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.2.3.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/bootstrap.min.js"></script>

<button class="btn btn-giant btn-primary" onclick="location.href='/Users';">
    <span class="glyphicon glyphicon-user" aria-hidden="true"></span> Users
</button>

<a class="btn btn-giant btn-primary" href="/Mail">
  <span class="glyphicon glyphicon-envelope" aria-hidden="true"></span> Mail
</a>

- pblyt

---

好的<button>标签默认有一些额外的内容，可以垂直居中显示内容。更多信息请查看这里。 - RGLSV

Answer 1

.btn-giant {
  display: flex!important;
  flex-direction:column;
  justify-content: center;
  align-items: center;
  float: left;
  width: 120px;
  height: 120px;
  margin-bottom: 8px;
  margin-right: 5px;
  padding: 10px 15px;
  font-size: 12px;
  text-align: center;
  color: white;
  border-radius: 0;
  white-space: normal;
}

.btn-giant .glyphicon {
  font-size: 36px;
  display: block;
  margin-bottom: .3em;
}

<link href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.2.3.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/bootstrap.min.js"></script>

<button class="btn btn-giant btn-primary" onclick="location.href='/Users';">
    <span class="glyphicon glyphicon-user" aria-hidden="true"></span> Users
</button>

<a class="btn btn-giant btn-primary" href="/Mail">
  <span class="glyphicon glyphicon-envelope" aria-hidden="true"></span> Mail
</a>

- Venzacc

Answer 2

尝试这段代码

.btn-giant {
  display: inline-block;
  width: 120px;
  height: 120px;
  margin-bottom: 8px;
  margin-right: 5px;
  padding: 10px 15px;
  font-size: 12px;
  text-align: center;
  color: white;
  border-radius: 0;
  white-space: normal;
}

.btn-giant .glyphicon {
  font-size: 36px;
  display: block;
}

#mail span {
  position: relative;
  top: 25px;
}
.mail-text{
  position:relative;
  top:30px;
}

<link href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.2.3.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/bootstrap.min.js"></script>

<button class="btn btn-giant btn-primary" onclick="location.href='/Users';">
    <span class="glyphicon glyphicon-user" aria-hidden="true"></span> Users
</button>

<a id="mail" class="btn btn-giant btn-primary" href="/Mail">
  <span class="glyphicon glyphicon-envelope mail" aria-hidden="true"></span><span class="mail-text">Mail</span>
</a>

- Momin

Answer 3

你需要为 span glyphicon 添加一个上边距。

可工作的代码片段

.btn-giant {
  display: inline-block;
  width: 120px;
  height: 120px;
  margin-bottom: 8px;
  margin-right: 5px;
  padding: 10px 15px;
  font-size: 12px;
  text-align: center;
  color: white;
  border-radius: 0;
  white-space: normal;
}

.btn-giant .glyphicon {
  font-size: 36px;
  display: block;
  margin-bottom: .3em;
}
#link {
margin-top:0.45em ;
}

<link href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.2.3.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/bootstrap.min.js"></script>

<button class="btn btn-giant btn-primary" onclick="location.href='/Users';">
    <span class="glyphicon glyphicon-user" aria-hidden="true"></span> Users
</button>

<a  class="btn btn-giant btn-primary" href="/Mail">
  <span id="link" class="glyphicon glyphicon-envelope" aria-hidden="true"></span> Mail
</a>

- neophyte

Answer 4

.btn-giant {
  display: inline-block;
  width: 120px;
  height: 120px;
  margin-bottom: 8px;
  margin-right: 5px;
  padding: 10px 15px;
  font-size: 12px;
  text-align: center;
  color: white;
  border-radius: 0;
  white-space: normal;
}

.btn-giant .glyphicon {
  font-size: 36px;
  display: block;
  margin-bottom: .3em;
}
.glyphicon-envelope{
  margin : .5em;
}

<link href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.2.3.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/bootstrap.min.js"></script>

<button class="btn btn-giant btn-primary" onclick="location.href='/Users';">
    <span class="glyphicon glyphicon-user" aria-hidden="true"></span> Users
</button>

<a class="btn btn-giant btn-primary" href="/Mail">
  <span class="glyphicon glyphicon-envelope" aria-hidden="true"></span> Mail
</a>

- spickywolf

Answer 5

.btn-giant {
  display: inline-block;
  width: 120px;
  height: 120px;
  margin-bottom: 8px;
  margin-right: 5px;
  padding: 10px 15px;
  font-size: 12px;
  text-align: center;
  color: white;
  border-radius: 0;
  white-space: normal;
}

.btn-giant .glyphicon {
  font-size: 36px;
  display: block;
  margin-bottom: .3em;
}
.ver-mid {
    align-items: center;
    display: flex;
    height: 100vh;
    text-align: center;
}

<link href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.2.3.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/bootstrap.min.js"></script>
<div class="ver-mid">
<button class="btn btn-giant btn-primary" onclick="location.href='/Users';">
    <span class="glyphicon glyphicon-user" aria-hidden="true"></span> Users
</button>

<a class="btn btn-giant btn-primary" href="/Mail">
  <span class="glyphicon glyphicon-envelope" aria-hidden="true"></span> Mail
</a>

</div>

- lalit bhakuni