Css 按钮未与div中的图像对齐

在下图中，按钮（问题）低于图像（白色矩形）。他们都在同一个分区内。为什么？该页面有一个顶层

css网格

，共有3行

.grid容器{
显示：网格；
网格模板行：[导航行开始]自动[导航行结束徽标导航行开始]自动[徽标导航行结束内容行开始]自动[内容行结束]；
}
.导航样式{
高度：5vh；
/*使导航div占视口空间的5%*/
背景色：黑色；
}
.标志导航样式{
高度：20vh；
/*使logo nav div占据视口20%的空间*/
背景颜色：灰色；
}
.nav flexbox集装箱{
显示器：flex；
弯曲方向：行反向；
}
.内容风格{
高度：75vh；
/*使内容div占据视口75%的空间*/
背景色：白色；
}
#导航{
网格行：导航行开始/导航行结束；
边际：0px；
}
#标志导航{
网格行：徽标导航行开始/徽标导航行结束；
边际：0px；
}
#内容{
网格行：主体行开始/主体行结束；
边际：0px；
}
#剖面图{
保证金：5px；
}
#邮件图标图片{
保证金：5px；
}
#统计图标图片{
保证金：5px；
}
#标志图像{
/*“最大宽度”和“最大高度”规则将使图像适合div。如果图像大于div，则图像将
如果映像小于div，则映像将展开*/
最大宽度：100%；
最大高度：100%；
}
身体{
边际：0px；
}

问题
身体

我无法回答“为什么”部分，但一个解决方案是将

显示：flex

和

对齐项目：flex end

添加到

。徽标导航样式

另外，我不会将

.content style

锁定为

高度：75vh

，而是使用

最小高度：75vh

，这样内容就可以扩展到这个范围之外

我也不明白为什么你得到了

flex-direction:row-reverse.nav flexbox容器上编码>

。为什么不先把元素按正确的顺序排列呢

.grid容器{
显示：网格；
网格模板行：[导航行开始]自动[导航行结束徽标导航行开始]自动[徽标导航行结束内容行开始]自动[内容行结束]；
}
.导航样式{
高度：5vh；
/*使导航div占视口空间的5%*/
背景色：黑色；
}
.标志导航样式{
高度：20vh；
/*使logo nav div占据视口20%的空间*/
背景颜色：灰色；
/*里卡德加法*/
显示器：flex；
对齐项目：柔性端；
}
.nav flexbox集装箱{
显示器：flex；
弯曲方向：行反向；
}
.内容风格{
最小高度：75vh；
/*使内容div占据视口75%的空间*/
背景色：白色；
}
#导航{
网格行：导航行开始/导航行结束；
边际：0px；
}
#标志导航{
网格行：徽标导航行开始/徽标导航行结束；
边际：0px；
}
#内容{
网格行：主体行开始/主体行结束；
边际：0px；
}
#剖面图{
保证金：5px；
}
#邮件图标图片{
保证金：5px；
}
#统计图标图片{
保证金：5px；
}
#标志图像{
/*“最大宽度”和“最大高度”规则将使图像适合div。如果图像大于div，则图像将
如果映像小于div，则映像将展开*/
最大宽度：100%；
最大高度：100%；
}
身体{
边际：0px；
}

问题
身体

因为带有

id=“logo image”

的图像会将按钮挡在原始上下文之外。对不起，我没有跟上您。请您详细说明一下。您是在说

按钮的
位置
属性吗？我尝试了各种值，但无法使按钮与图像对齐。我希望它位于底部，与图像底部对齐。但它是正确的，不比那个低一点删除高度：20vh英寸。标志导航风格类。我无法复制，因为没有图像。