将 div 中的 a 标签内的 img 垂直居中答案

【问题标题】：Vertically Centering an img within an a tag within a div将 div 中的 a 标签内的 img 垂直居中
【发布时间】：2016-10-28 19:50:04
【问题描述】：

我正在尝试在 <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

我已经尝试过将图像设置为包含它的 div 的背景图像并在其间插入<a> 标记的解决方案，但它似乎不能作为链接工作，即使我可以得到它垂直对齐：

我已经检查了here 和here 作为资源，但在这种情况下无法应用他们的方法。

【问题讨论】：

问题与div *规则有关。这样做的目的是什么？如果没有目的，将其删除，这将解决大部分问题，但不是全部。如果需要，那就另当别论了。

标签： html css

【解决方案1】：

你应该替换这一行：

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

使用此代码：

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

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

【讨论】：

【解决方案2】：

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

我在这里使用了display:flexbox。

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

这是一个代码笔 http://codepen.io/Maharkus/pen/ozRyNK

【讨论】：

【解决方案3】：

如果您不想处理 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
}

【讨论】：

【解决方案4】：

你想要的是这样的。您会注意到我再次将定位样式添加到<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 并通过它们的类/ID 调用元素

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

【讨论】：