CSS SVG align vertical middle with Label - css

Question

Hi I have the following code where I need to vertical align the SVG with the label.
g {
fill: blue;
fill-rule: evenodd;
}
#firstdiv:hover {
border-radius: 25px;
background: #dcd9d9;
padding-top: 6px;
height: 35px;
width: 100%;
display: inline-block;
}
#svgcontainer {
display: inline;
}
<div id='firstdiv'>
<div id='svgcontainer'>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="22" height="22" viewBox="0 0 22 22">
<defs>
<path id="a" d="M11 11a3.666 3.666 0 0 0 3.667-3.667A3.666 3.666 0 0 0 11 3.667a3.666 3.666 0 0 0-3.667 3.666A3.666 3.666 0 0 0 11 11zm0 1.833c-2.447 0-7.333 1.229-7.333 3.667v1.833h14.666V16.5c0-2.438-4.885-3.667-7.333-3.667z"/>
</defs>
<g fill="none" fill-rule="evenodd">
<mask id="b" fill="#fff">
<use xlink:href="#a"/>
</mask>
<g fill="#000" fill-opacity=".54" mask="url(#b)">
<path d="M0 0h22v22H0z"/>
</g>
</g>
</svg>
</div>
Test
</div>
And when you hover nothing has to moved because right now when hover because the SVG is not vertically aligned to the middle when hover there is a move of the elements.
https://jsfiddle.net/164seo3g/1/
Thanks

Answer 1

Few pointers,
usually hover should change only the relevant css properties, it should not change layout & stuff, so, what I did is to split styles, without hover contains all the props that related to layout, hover, contains only the change.
You can use vertical-align: middle on item that has siblings, your svg was inside a container, and therefore this wasn't worked.
g {
fill: blue;
fill-rule: evenodd;
}
#firstdiv {
border-radius: 25px;
line-height: 35px;
width: 100%;
display: inline-block;
}
#firstdiv:hover {
background: #dcd9d9;
}
#svgcontainer {
display: inline-block;
vertical-align: middle;
}
<div id='firstdiv'>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="22" height="22" viewBox="0 0 22 22" id='svgcontainer'>
<defs>
<path id="a" d="M11 11a3.666 3.666 0 0 0 3.667-3.667A3.666 3.666 0 0 0 11 3.667a3.666 3.666 0 0 0-3.667 3.666A3.666 3.666 0 0 0 11 11zm0 1.833c-2.447 0-7.333 1.229-7.333 3.667v1.833h14.666V16.5c0-2.438-4.885-3.667-7.333-3.667z"/>
</defs>
<g fill="none" fill-rule="evenodd">
<mask id="b" fill="#fff">
<use xlink:href="#a"/>
</mask>
<g fill="#000" fill-opacity=".54" mask="url(#b)">
<path d="M0 0h22v22H0z"/>
</g>
</g>
</svg> Test
</div>