how can I vertically align a google icon within a button? (ie11) - html

Question

I have trouble with vertical alignment of some google icons inside buttons. I tried to play with padding and margin but I could not fix the issue.
This is a screenshot of the problem: as you can see the icon are placed slightly higher:
This is part of the html, each button is more or less the same:
<div id="mainToolbar">
<button id="buttonPencil" data-tool="yes" data-type="draw" title="Use pencil" class="button" onclick="changeTool(0);">
<i class="material-icons">brush</i>
</button>
</div>
This is the css for the button:
.button {
margin: auto;
display: inline-block;
margin-top: 5px;
color: black;
border: 0px solid grey;
border-radius: 6px;
background-color: #EFEFEF;
text-align: center;
text-decoration: none;
cursor: pointer;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
z-index: 4;
vertical-align: middle;
}
.button {
width: 50px;
height: 40px;
}
.button:hover {
background-color: #aaaaaa !important;
color: white !important;
}
And finally the css for the div:
#mainToolbar {
position: absolute;
top: 0px;
left: 0px;
height: 520px;
width: 60px;
z-index: 10;
text-align: center;
}
How can I put the icon right in the middle of the button (both vertically and horizontally)? Thanks.

Answer 1

You can use absolute positioning along with translate to position the icon right in the middle. Be sure to add a position:relative on the button so that the icon is positioned w.r.t to the button.
.button {
margin: auto;
display: inline-block;
margin-top: 5px;
color: black;
border: 0px solid grey;
border-radius: 6px;
background-color: #EFEFEF;
text-align: center;
text-decoration: none;
cursor: pointer;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
z-index: 4;
vertical-align: middle;
}
.button {
width: 50px;
height: 40px;
position: relative;
}
.button:hover {
background-color: #aaaaaa !important;
color: white !important;
}
.button:active i{
/*for push effect on click*/
transform: translate(-45%, -45%);
}
.button i {
/*horizontal and vertical centering*/
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#mainToolbar {
position: absolute;
top: 0px;
left: 0px;
height: 520px;
width: 60px;
z-index: 10;
text-align: center;
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<div id="mainToolbar">
<button id="buttonPencil" data-tool="yes" data-type="draw" title="Use pencil" class="button" onclick="changeTool(0);">
<i class="material-icons">brush</i>
</button>
</div>
To explain:
top:50% with a position: absolute will move the icon down 50% of the parent's height. A translateY with -50% will move the icon up by half its height so that its aligned right in the middle by its center. Similarly with horizontal centering.

Answer 2

Its Working Fine see snippet
.button {
margin: auto;
display: inline-block;
margin-top: 5px;
color: black;
border: 0px solid grey;
border-radius: 6px;
background-color: #EFEFEF;
text-align: center;
text-decoration: none;
cursor: pointer;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
z-index: 4;
vertical-align: middle;
}
.button {
width: 50px;
height: 40px;
}
.button:hover {
background-color: #aaaaaa !important;
color: white !important;
}
And finally the css for the div:
#mainToolbar {
position: absolute;
top: 0px;
left: 0px;
height: 520px;
width: 60px;
z-index: 10;
text-align: center;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div id="mainToolbar">
<button id="buttonPencil" data-tool="yes" data-type="draw" title="Use pencil" class="button" onclick="changeTool(0);">
<i class="fa fa-leaf"></i>
</button>
</div>