How to vertically align in the middle a clickable image (between <a></a>) inside a div in a responsive manner?

Question

QUESTION:

I have two clickable images inside a div. How can I vertically align them in the middle ?

---

WHAT I TRIED:

• How to vertically align an image inside div

• Vertically align an image inside a div with responsive height

---

CODE:

CSS

.accounts {
    height: 90%;
    width: 100%;  
    margin: auto;
    text-align: center;
    font: 0/0 a;
}

.accounts:before {
    content: ' ';
    display: inline-block;
    vertical-align: middle;  /* vertical alignment of the inline element */
    height: 100%;
}

.accounts a {
    width: 30%;
/*    margin: 20% 5% 0% 5%;*/
    display: inline-block;
    vertical-align: middle;
    font: 16px/1 Arial sans-serif; 
}

.accounts a img {
    width: 100%;
}

HTML

<div class="accounts">
   <a href="LinkA" target="_blank"><img src="Vendors/Images/GithubLogo.png" alt="Github"></a>
   <a href="LinkB" target="_blank"><img src="Vendors/Images/SOLogo.png" alt="Stack Overflow"></a>
</div>

Answer 1

Use like this

    <div class="accounts">
        <a href="LinkA" target="_blank"><img src="Vendors/Images/GithubLogo.png" alt="Github"></a>
   </div>
   <div class="accounts">
        <a href="LinkB" target="_blank"><img src="Vendors/Images/SOLogo.png" alt="Stack Overflow"></a>
    </div>