我想要垂直居中对于 Bootstrap 的
在下面的片段中: - "User" 按钮使用
请注意: - 无法修改 HTML 代码。 - 无法给图标或文本指定固定的外边距,因为按钮内可能有多行文本。
<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>
<button>
标签默认有一些额外的内容,可以垂直居中显示内容。更多信息请查看这里。 - RGLSV