Bootstrap <a> button with icon and text vertically aligned in the middle
I want to vertically align icon and button text of Boottrap tag <a>
, my style snippet only works for the tag <button>
, but doesn't work for the tag <a>
.
In the snippet below:
- The "User" button uses
<button>
to execute (my style of desire!) - The Mail button uses the tag
<a>
to execute.
Note:
- Can't change html code
- Cannot assign fixed icon or text field because there may be 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>
+3
source to share
5 answers
.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>
+1
source to share
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>
+1
source to share
You need to add the top of the box to 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>
0
source to share
.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>
0
source to share
.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>
-1
source to share