带有图标和文本的Bootstrap <a>标签按钮垂直对齐中间

Question

我想垂直中间对齐Bootstrap <a>标签按钮的图标和文本，我的样式片段仅适用于<button>标签，但<a>标签失败。

在下面的代码片段中：

• “用户”按钮正在使用<button>执行（我的愿望风格！）
• “邮件”按钮正在使用<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> 

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> 

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> 

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> 

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> 

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>