Question

我正在尝试将图像垂直居中放在<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中的div的背景图像并在其间插入<a>标记的解决方案，但它似乎不能用作链接，即使我可以让它垂直对齐：

我已将here和here视为资源，但在这种情况下无法应用其方法。

Answer 1

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

Answer 2

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

我在这里使用display:flexbox。

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

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

Answer 3

您应该替换此行：

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

使用此代码：

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

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

Answer 4

你要去的是这样的。您会注意到我已经将定位样式再次添加到<img>。

＆＃13;

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%);
}

＆＃13;

<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

＆＃13;

但如果我是你，我会做这样的事情，它使用flexbox并按类/ ID调用元素

＆＃13;

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

＆＃13;

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

＆＃13;

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

4 个答案: