You can use CSS Flexbox to align the SVG icon vertically next to the span. Here’s an example:
HTML:
<div class="container">
<span>Some text</span>
<svg class="icon" viewBox="0 0 24 24">
<path d="M12 21a9 9 0 0 1-7.38-3.85l-.19-.3A8.93 8.93 0 0 1 4.23 9H3a1 1 0 0 1 0-2h1.23a8.93 8.93 0 0 1 .2-8.85l.18-.3A9 9 0 0 1 12 3a9 9 0 0 1 7.38 3.85l.19.3A8.93 8.93 0 0 1 19.77 15h1a1 1 0 0 1 0 2h-1.23a8.93 8.93 0 0 1-.2 8.85l-.18.3A9 9 0 0 1 12 21zm-7.85-4.15a7 7 0 1 0 9.9 0 7 7 0 0 0-9.9 0z"/>
</svg>
</div>
CSS:
.container {
display: flex;
align-items: center;
}
.icon {
width: 24px;
height: 24px;
margin-left: 8px;
}
In the HTML, we have a container div that wraps around the span and SVG icon. We apply the CSS display: flex;
and align-items: center;
to the container, which vertically aligns its child elements. We also give the SVG icon a left margin of 8px to add some space between the span and icon.
Note that in this example, we’ve added a sample SVG icon using a path element. You’ll need to replace this with your own SVG code or reference an external SVG file using an img
tag.
Asked: 2022-04-07 11:00:00 +0000
Seen: 14 times
Last updated: Mar 18 '22