在一个div内的垂直居中img内的一个标签

我想垂直居中一个图像在<a>标签的div中，但我无法让CSS垂直居中对我的图像。在一个div内的垂直居中img内的一个标签

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

我试图使div的背景图片它包含在图像和插入的解决方案它们之间的标签为<a>，但它似乎并不起到链接的作用，即使我可以将其垂直对齐：

我已将here和here作为资源进行了检查，但在这种情况下未能应用它们的方法。

来源

2016-10-28 ZLevine

问题与'div *'规则有关。那是什么目的？如果没有目的，请将其删除，这将解决大部分问题，但不是全部。如果需要的话，那是一种不同的蠕虫。 – Rob

您应该替换该行：

.footer * { 
    position: relative; 
    top: 50%; 
    transform: translateY(-50%); 
}

有了这个代码：

.footer #footerhome, .footer a { 
    position: relative; 
    top: 50%; 
    transform: translateY(-50%); 
} 
.footer a { 
    display: block; 
}

当你将所有的孩子对准他们的父母时，你的问题就开始了。

来源

2016-10-28 11:42:30

如果你不想处理flexbox，有一个老的黑客。总之，你应该实现你的标记表般的语义与display: table和display: table-cell规则：

.footer { 
    display: table; 
} 

#footerhome { 
    display: table-cell; 
    vertical-align: middle; 
}

UPD

按照你更新的代码：

#footerhome { 
    display: table; 
} 

a { 
    display: table-cell; 
    vertical-align: middle; 
    height: // some fixed height 
}

来源

2016-10-28 11:37:25 markoffden

有多种垂直居中图像的可能性。可以找到其他可行的解决方案here

我在这里使用了display:flexbox。

#footerhome { 
display: flex; 
align-items: center; 
}

这里有一个codepen http://codepen.io/Maharkus/pen/ozRyNK

来源

2016-10-28 11:41:54 Maharkus

你打算做什么是这样的。您会注意到我再次将定位样式添加到<img>。

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 div { 
 
    position: relative; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
    margin: 0 auto; 
 
    width: 4rem; 
 
    height: 100%; 
 
} 
 
div img { 
 
    width: 4rem; 
 
    position: relative; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
}

<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

但是，如果我是你，我会做这样的事情，它采用Flexbox，就和他们班调用元素/ IDS

#footerhome, 
 
.footer { 
 
    box-sizing: border-box; 
 
    padding: 0 5.5rem; 
 
    border-style: solid 
 
} 
 

 
.footer { 
 
    height: 7rem; 
 
    width: 90%; 
 
    margin: 1.25rem auto; 
 
    font-size: .8rem; 
 
    border-width: .08rem 
 
} 
 

 
#footerhome { 
 
    width: 4rem; 
 
    height: 100%; 
 
    display: flex; 
 
    justify-content: center; 
 
    margin: 0 auto; 
 
    align-items: center; 
 
    border-width: 0 .08rem 
 
} 
 

 
#footerhome img { 
 
    width: 4rem 
 
}

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

来源

2016-10-28 11:50:04

在一个div内的垂直居中img内的一个标签

回答

相关问题