I am working on a portfolio site and encountered a small problem. I am attempting to create links that have a website logo and some text next to it for my various projects. Since the images are a bit larger than the text the text gets aligned with the bottom of the image. I have attempted using align-items: center from flexbox, but since the text is a part of the flex element that contains both the image and the text that just centers both components in the middle of the flex container leaving me with the same problem. What is the cleanest way of accomplishing what I am trying to achieve?
Current result:
Image may be NSFW.
Clik here to view.
HTML:
<aside><a href=""><img src="./icons/github.png" alt="Github" width="17px" height="17px"/> Source Code</a><a href=""><img src="./icons/netlify.png" alt="Netlify" width="17px" height="17px"/> Deployed Project</a></aside>CSS:
aside { display: flex; align-items: center; gap: 20px; border: 1px solid black; /* Border added to help visualize the difference between image and text alignment */} aside a { text-decoration: none;}