我试图在<a>标签中的div中垂直居中放置图像，但我无法终生使用CSS在图像中垂直居中放置图像。
div {
height: 7rem;
width: 90%;
text-align: center;
margin: 1.25rem auto;
padding: 0 5.5rem 0 5.5rem;
font-size: .8rem;
border-style: solid;
border-width: .08rem;
}
div * {
position: relative;
top: 50%;
transform: translateY(-50%);
}
div img {
width: 4rem;
}
div div {
margin: 0 auto;
width: 4rem;
height: 100%;
}<div class="footer">
<div id="footerhome">
<a href="https://www.google.com">
<img src="http://images.clipartpanda.com/smiley-face-transparent-background-tumblr_mdv6nltwdB1qdic05o1_500.gif" />
</a>
</div>
</div>这就是我目前正在使用的工具：http : //codepen.io/SamanthaBae/pen/LRomdr
我已经尝试过将图像<a>设为包含它的div的背景图像并在其中插入标签的解决方案，但是即使我可以将其垂直对齐，它也似乎无法用作链接：
您应该替换此行：
.footer * {
position: relative;
top: 50%;
transform: translateY(-50%);
}
使用此代码：
.footer #footerhome, .footer a {
position: relative;
top: 50%;
transform: translateY(-50%);
}
.footer a {
display: block;
}
当您将所有孩子与他们的父母对齐时，您的问题就开始了。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句