如何调整文本位置使其与左侧网格图像垂直居中对齐？

给文本和图片的父容器.container-sub-header添加布局控制，就能实现垂直居中，以下是两种可行方案：

方案一：Flexbox布局（推荐） #

修改.container-sub-header的CSS，通过Flex实现横向排列+垂直居中：

.container-sub-header {
  display: flex;
  align-items: center;
  gap: 2rem; /* 可选，增加图片与文本的间距 */
}

完整修改后的CSS代码 #

.sub-header{
    margin:100px
}
.container-header{
    padding: 2px;
}
.container-sub-header {
  display: flex;
  align-items: center;
  gap: 2rem;
}
.sub-header-image{
    display: grid;
}
#image2{
    grid-column: 2/ span 2;
    grid-row: 1 / span 2;
}
#image1{
    grid-column: 1 / span 3;
    grid-row: 2 / span 2;
}
.sub-header-image img{
    height: 300px;
    width: 475px;
}
.subheader-text{
    text-align: center;
    width: 40%;
}
.subheader-text h1{
    font-size: 30px;
}
.subheader-text p{
    font-size: 20px;
}

注：可以移除.subheader-text里的margin-left: auto，Flex布局下的gap已经能控制间距；若需要文本块靠右，可保留该属性。

方案二：Grid布局 #

如果习惯用Grid，也可以给父容器设置Grid布局：

.container-sub-header {
  display: grid;
  grid-template-columns: auto 40%;
  align-items: center;
  gap: 2rem;
}

为什么之前的方法无效？ #

padding和translate仅作用于文本块自身，而父容器默认是块级元素，子元素会垂直排列，无法实现横向布局下的垂直对齐。只有给父容器添加Flex/Grid布局，才能从整体上控制子元素的对齐方式。

内容的提问来源于stack exchange，提问作者xRGx901x