I have a row of images inside a flexbox with content justified to centre and items aligned to center; ie the content should be vertically and horizontally centred.
All looked great, until I went and wrapped these images in tags to make them clickable. Doing this changes the styling, raising the image by a few pixels and meaning it is no longer vertically centred.
In the images below, I've placed a coloured div behind the images to make them easier to view:
This is how it looks with all the images wrapped in links
This is how it looks with 2 images (UK and France) "unwrapped" from links
As you can see, the UK and French flags it vertically centred when not wrapped in tags, yet the others do not. The only CSS I have for the tags is:
a {
text-decoration: none;
color: #000000;
}
Pretty standard I think? My HTML for an image wrapped in a link is below. (lang_container_desktop is coloured div, header_links is the flexbox containing the images):
<div class="header_links">
<div class="lang_container_desktop">
<a href="operation.php?op=changelang&lang=nederlands">
<img src="assets/nederland.png" alt="Nederlands" style="width: 2vh; height: 2vh;">
</a>
</div>
</div>
CSS for flexbox:
.header_links {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
margin-top: 0;
margin-bottom: 0;
padding-left: 1vw;
padding-right: 1vw;
height: 4vh;
width: auto;
}
FYI, yes, the problem still occurs when the image is not sitting in the coloured div :)
Thanks in advance to anyone who can point me in the right direction!
With a nudge in the right direction from @shutupchigo, I experimented with my tag in the stylesheet and it's now working.
I added the same flexbox properties from the flexbox to the tag and everything is now vertically centred as it should be. I've added the CSS code below. Hopefully this solution may help someone in the future!
a {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
text-decoration: none;
color: #000000;
}