css - 将文本左对齐（相对于）div

Question

我有一些h2文本当前在移动视图中与左侧对齐，位于居中的 div 上方。我如何才能将其相对于移动视图中的 div 向左对齐（应用下面的 CSS 中提供的媒体查询）？

代码笔

相关HTML：

<section class="container-projects">
        <h2 class="portfolio-header">Featured Work</h2>
        <div class="project"> 

相关CSS：

    .portfolio-header {
      /* Puts header in its own row without removing from container with row flex direction (setting parent container to wrap also required) */
      width: 100%;
      text-align: left;
      color: #7d97ad;
    }

    .container-projects {
      display: flex;
      /* Parent container needs this for flex-item to take full width in row */
      flex-wrap: wrap;
      flex-direction: row;
      justify-content: space-between;
      margin: 2em 0;
    }

/* Special styling for screens up to 767px wide, inclusive (applies to landscape phones) */
@media screen and (max-width: 767px) {
  header, .container, footer {
    max-width: 100%;
  }

  /* Must specify max-width for img even though parent .container has the same declaration because max-width isn't inherited */
  .container img {
    max-width: 100%;
  }

  .project {
    /* Centers projects (aligned left otherwise) */
    margin: 0 auto;
  }

}

标签： cssflexbox

Answer 1

您可以为移动设备添加媒体查询

@media screen and (max-width: 600px) {
    .portfolio-header {
        width: 300px;
        margin: 10px auto;
    }
}