图像旁边的垂直对齐按钮

Question

我正在尝试将我的链接连接到中间的垂直对齐中心，我的徽标在中间垂直对齐，但在右下方显示。我可以让图像完美地工作。但我无法将链接垂直对齐中间。

这也是全宽度。

.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;的元素，所以i＆ ＃39;已在徽标上添加了transform:translateY(-50%)和top:50%。

这是有效的，因为，top：50％指的是50％的页脚高度，而translateY（-50％）指的是徽标高度的50％，所以基本上你从上到下移动徽标使用50％的页脚高度，然后以50％的自身高度将其向上移动，结果是它垂直居中。

选项C

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

选项D

另一个选项是在top:calc(50% - 50px)上使用.footer-logo但这只适用于徽标的高度保持不变的情况。不建议使用此方法，但它可以很好地利用calc() CSS功能

你选择;）

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;