boh boh - 5 months ago 7
CSS Question

middle align svg with inline text

I have a simple svg image with some inline text as pasted here. How to middle-align both the text and the icon vertically? I tried usual ways to middle align such as setting negative

martin-top
, use
table-cell
but no luck.

HTML:

<div class="ImageLabel__label___Yb88q">
<i class="ImageLabel__icon___bFeGT">
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<title>email</title>
<path d="..."></path>
</svg>
</i>
john@gmail.com
</div>


CSS:

svg {
width: 25px;
height: 25px;
margin-right: 3px;
}

Answer
   svg {
    width: 25px;
    height: 25px;
    margin-right: 3px;
    Vertical-align: middle;   /*----- Add this property in your svg -----*/
    }
Comments