css - 将文本左对齐(相对于)div

Question

我有一些 h2 文本当前在移动 View 中左对齐，位于居中的 div 上方。我怎样才能将它对齐到移动 View 中相对于 div 的左对齐(应用下面的 CSS 中提供的媒体查询)？

CodePen

相关的 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;
  }

}

Answer 1

https://codepen.io/anon/pen/OZjWwJ?editors=1100

稍微修改的 HTML

<section class="portfolio">
  <h2 class="portfolio-header">Featured Work</h2>
  <div class="container-projects">
    <div class="project">
      <img class="project-image" src="https://image.ibb.co/hv4c8n/santorini_small.jpg" alt="View from island of Santorini on a sunny day">
      <h3>Project No. 1</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
    <div class="project">
      <img class="project-image" src="https://image.ibb.co/c9sKM7/coast_small.jpg" alt="Distant view of a rugged island with a sailboat nearby">
      <h3>Project No. 2</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
    <div class="project">
      <img class="project-image" src="https://image.ibb.co/eO9oES/mediterranean_small.jpg" alt="Bird's eye view of a rocky beach with clear turquoise waters">
      <h3>Project No. 3</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
  </div>
</section>

和CSS

.portfolio {
  margin: 0 auto;
  width: 100%;
}

@media screen and (max-width: 992px) {
  .portfolio {
    width: 90%;
  }
}

通过这种方式，您将 h2 和元素图像包装在一个容器中，这使得管理它们在屏幕上的边距更加合乎逻辑。 margin: 0 auto 将容器对齐到屏幕中心，这在所有屏幕宽度上都是可取的。

992px 媒体查询来自 Bootstrap 4 的标准化网格系统:https://getbootstrap.com/docs/4.0/layout/grid/#grid-options