html - 图片旁边的垂直对齐按钮

Question

我正在尝试让我的链接在中间垂直对齐中心，并将我的 Logo 在中间垂直对齐但偏向右侧，如下图所示。我可以让图像完美地工作。但我无法让链接垂直居中对齐。

这也将是全宽的。

.footer-logo {
  display: block;
  position: absolute;
  right: 50px;	
  margin-top: 30px;
}

.footer-main {
  height: 200px;
  background-image: url(../images/backgrounds/bg-image.jpg);
  background-color: grey;	
  position: relative;
  text-align: center;
  vertical-align: middle;
}

<div class="footer-main">
  <a class="button" href="#">My test link here</a>
  <img src="http://placehold.it/100" alt="" class="footer-logo">
</div>

Answer 1

CSS中没有top-margin只有margin-top或top

选项 A 在容器上使用 display:flex ，在这种情况下为 #footer，同时使用 align-items: center ; 和 justify-content: center;

align-items 将 flexbox 中的元素垂直对齐
并且 justify-content 将它们水平

对齐

文档:

• display:flex
• align-items
• justify-content

选项 B(在评论之后)似乎在 firefox 中，应用 align-items:center 不会影响带有 position:absolute; 所以我在 Logo 上添加了 transform:translateY(-50%) 和 top:50%。

这是有效的，因为 top:50% 指的是页脚高度的 50%，而 translateY(-50%) 指的是 Logo 高度的 50%，所以基本上你从上到下移动 Logo 的 50%页脚高度，然后将其向上移动到其自高度度的 50%，结果是它垂直居中。

选项C

在 .footer-logo 上使用 display:inline-block 和 vertical-align:middle 也可以。

选项 D

另一种选择是在 .footer-logo 上使用 top:calc(50% - 50px) 但这仅在 Logo 的高度保持不变时有效持续的。不建议使用此方法，但它很好地使用了 calc() CSS 函数

你选择;)

.footer-logo {
display: block;
position: absolute;
right: 50px;   
transform: translateY(-50%);
top:50%;

}

.footer-main {
height: 200px;
background-color: grey; 
position: relative;



  display: flex;
  align-items: center;
  justify-content: center;
}

<div class="footer-main">
<a class="button" href="#">My test link here</a>
<img src="http://placehold.it/50x100" alt="" class="footer-logo">
</div>