html - 如何以响应方式在 div 内的中间垂直对齐可点击图像(<a></a> 之间)？

Question

问题:

我在一个 div 中有两个可点击的图像。如何在中间垂直对齐它们？

---

我尝试了什么:

• How to vertically align an image inside div

• Vertically align an image inside a div with responsive height

---

代码:

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

这样使用

    <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>