移动端h2文本如何相对于居中div左对齐？（附媒体查询）

DevOps 小满

2026-5-26

解决方案

要让移动端视图中h2.portfolio-header相对于下方居中的.project左对齐，核心思路是让标题的水平约束范围和目标div保持一致，这样它的左边缘就能和div的左边缘精准对齐。下面是两种实用的实现方式：

方法一：匹配宽度与居中规则（最直接）

假设你的.project在移动端是通过max-width+margin: 0 auto实现居中的，直接给标题套用相同的宽度约束和居中样式即可：

/* 替换成你实际的移动端断点 */
@media (max-width: 768px) {
  /* 确保.project的居中样式（如果未设置的话） */
  .project {
    max-width: 90%; /* 也可以用固定宽度，比如320px */
    margin: 0 auto;
  }
  
  /* 让标题和.project对齐 */
  .portfolio-header {
    max-width: 90%; /* 和.project的max-width完全一致 */
    margin: 0 auto; /* 让标题和.project同步居中 */
    text-align: left; /* 明确左对齐，避免继承其他样式干扰 */
  }
}

方法二：利用Flex布局分组对齐

如果父容器.container-projects采用Flex布局，可以通过调整Flex属性让标题和div共享同一约束范围：

@media (max-width: 768px) {
  .container-projects {
    display: flex;
    flex-direction: column;
    align-items: center; /* 让子元素整体在父容器中居中 */
  }
  
  .portfolio-header, .project {
    width: 100%;
    max-width: 90%; /* 统一设置最大宽度，确保两者范围一致 */
  }
  
  .portfolio-header {
    text-align: left;
  }
}