CSS Grid布局下项目区H4文本显示在图片右侧的对齐问题求解

数据老陈

2026-10-7

问题原因

你项目中的<a>元素设置了display: flex，flex布局默认主轴为水平方向，所以img和h4标签会横向并排展示，和你想要的上下结构不符；同时你设置的.projects a *给所有子元素统一指定了高度、最大宽度等属性，会影响h4的正常排版。另外你的基础样式里p,a,li { color: ##0077b3; }多写了一个#号，会导致这个颜色属性失效。

修复方案

只需要修改对应a标签的flex布局方向，同时调整子元素的通用样式即可，修改后的相关CSS代码如下：

/* 替换移动端默认样式部分的.projects a相关代码 */
.projects a {
    grid-column: 1/9;
    margin: 20px 0;
    display: flex;
    flex-direction: column; /* 改为垂直排列 */
    align-items: center; /* 子元素水平居中，可按需调整 */
    gap: 12px; /* 图片和文字的间距，可按需调整 */
}

/* 删掉原来的.projects a * 通用样式，改为分别设置img和h4的属性 */
.projects a img {
    margin: 0;
    max-width: 40%;
}
.projects a h4 {
    margin: 0;
    text-align: center; /* 文字对齐方式，可按需调整为left/right */
}

/* 桌面端样式部分对应修改，补上你实际用的媒体查询断点，比如768px */
@media screen and (min-width: 768px) {
    .projects {
        margin-top:40px;
    }
    .projects a {
        grid-column: span 4;
        margin: 20px 0;
    }
    .projects .row-one {
        grid-row:1;
    }
    .projects img {
        width: 100%;
        max-width: 200px;
        height: 120px;
        object-fit: cover; /* 避免图片拉伸变形，可按需删除 */
        border-radius: 20px;
    }
    .projects .row-three {
      grid-column: 3/7;
    }
}