Bootstrap tag button with Icon and Text vertically align middle

Question

I want to vertically middle align the icon and text for the Bootstrap <a> tag button, my style snippet only works for <button> tag but fails for <a> tag.

In the below snippet:

"User" button is using <button> to perform (my desire style!)
"Mail" button is using <a> tag to perform.

Please note that:

Cannot modify the html code
Cannot assign fixed margin to the icon or text, because there may have multi-line text inside the button

.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>

score 1 · Accepted Answer · answered Mar 28 '17 at 08:44

.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>

score 1 · Answer 2 · answered Mar 28 '17 at 08:51

Try This Code

.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>

score 0 · Answer 3 · answered Mar 28 '17 at 08:50

You need to add a margin top to the span glyphicon.

Working snippet

.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>

score 0 · Answer 4 · answered Mar 28 '17 at 09:02

.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>

score -1 · Answer 5 · answered Mar 28 '17 at 08:41

.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>

Bootstrap tag button with Icon and Text vertically align middle

5 Answers5