Html 图像旁边的垂直对齐按钮 我试图让我在中间的垂直对齐中心和我的标志垂直对齐在中间，但右下，因为下面的图像显示。我可以让图像完美地工作。但我无法使链接垂直对齐到中间

这也将是整个宽度

.footer徽标{
显示：块；
位置：绝对位置；
右：50px；
边缘顶部：30px；
}
.footer main{
高度：200px；
背景图像：url（../images/backgrounds/bg image.jpg）；
背景颜色：灰色；
位置：相对位置；
文本对齐：居中；
垂直对齐：中间对齐；
}

---

仅CSS中没有

上边距

，

上边距

或

上边距

选项A在容器上使用

display:flex

，

#footer

，在这种情况下，与

对齐项目：居中一起使用和
调整内容：中心

其中，
align items
垂直对齐flexbox中的项目
并且，
justify content
将它们横向对齐

文档：






选项B（注释后）类似于firefox，应用
对齐项：居中
不会影响
位置：绝对的元素
因此我在徽标上添加了
transform:translateY（-50%）
和
top:50%

这是因为，top:50%ref指的是页脚高度的50%，translateY（-50%）指的是徽标高度的50%，因此基本上，您可以使用页脚高度的50%从上到下移动徽标，然后使用其自身高度的50%将其向上移动，结果是徽标垂直居中

选项C

在
上使用
显示：内联块
和
垂直对齐：中间
。页脚徽标
也会起作用

选项D

还有一个选择是在
.footer徽标上使用
top:calc（50%-50px）
，但这仅在徽标高度保持不变时有效。不建议使用此方法，但它可以很好地使用
calc（）
CSS函数

你选择；）


.footer徽标{
显示：块；
位置：绝对位置；
右：50px；
转化：translateY（-50%）；
最高：50%；
}
.footer main{
高度：200px；
背景颜色：灰色；
位置：相对位置；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
仅CSS中没有
上边距
，
上边距
或
上边距

选项A在容器上使用
display:flex
，
#footer
，在这种情况下，与
对齐项目：居中一起使用和
调整内容：中心

其中，
align items
垂直对齐flexbox中的项目
并且，
justify content
将它们横向对齐

文档：






选项B（注释后）类似于firefox，应用
对齐项：居中
不会影响
位置：绝对的元素
因此我在徽标上添加了
transform:translateY（-50%）
和
top:50%

这是因为，top:50%ref指的是页脚高度的50%，translateY（-50%）指的是徽标高度的50%，因此基本上，您可以使用页脚高度的50%从上到下移动徽标，然后使用其自身高度的50%将其向上移动，结果是徽标垂直居中

选项C

在
上使用
显示：内联块
和
垂直对齐：中间
。页脚徽标
也会起作用

选项D

还有一个选择是在
.footer徽标上使用
top:calc（50%-50px）
，但这仅在徽标高度保持不变时有效。不建议使用此方法，但它可以很好地使用
calc（）
CSS函数

你选择；）


.footer徽标{
显示：块；
位置：绝对位置；
右：50px；
转化：translateY（-50%）；
最高：50%；
}
.footer main{
高度：200px；
背景颜色：灰色；
位置：相对位置；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}

@mihai t看看我的照片。。按钮现在看起来不错，但徽标不在屏幕上middle@DataDev一定要像我在代码中做的那样删除页边距顶部：30px。@mihai tlook如果运行代码剪切，图像将在底部对齐，而不是在底部对齐middle@DataDev嗯，你似乎在使用firefox，在firefox中，
绝对
元素的垂直居中不适用于
对齐项目
，因此，我使用translate和top更改了解决方案。让我知道它是否有效now@mihai-t看看我的形象。。按钮现在看起来不错，但徽标不在屏幕上middle@DataDev一定要像我在代码中做的那样删除页边距顶部：30px。@mihai tlook如果运行代码剪切，图像将在底部对齐，而不是在底部对齐middle@DataDev嗯，你似乎在使用firefox，在firefox中，
绝对
元素的垂直居中不适用于
对齐项目
，因此，我使用translate和top更改了解决方案。现在让我知道它是否有效