[英]How to vertically align in the middle a clickable image (between <a></a>) inside a div in a responsive manner?
QUESTION: 题:
I have two clickable images inside a div. 我在div中有两个可点击的图像。 How can I vertically align them in the middle ? 如何在中间垂直对齐它们?
WHAT I TRIED: 我尝试过的是:
CODE: 码:
CSS 的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 的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>
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.