Совместите текст с изображением в Flexbox

Question

У меня есть изображение и текст под ним, выровненный в сетке 2x2 с использованием flexbox.Я использовал сеть display: flex;, чтобы выстроить изображения и все необходимые сетки.Однако у меня есть проблема с текстом, который появляется под изображением.Я хотел бы, чтобы изображение отображалось в центре flexbox и использовало align-items: center, чтобы успешно добиться этого.Тем не менее, я хотел бы, чтобы текст под изображением выровнялся по левому краю, а не по центру, как остальные изгибаемые дочерние элементы.Возможно ли это так, как у меня сейчас настроено?

Я пытался извлечь текст из выравниваемого по центру элемента flexbox, но затем он учитывает текст в родительском flexbox и разрушает сетку изображения 2x2, которая у меня есть.создано.

Вот код, который у меня есть в настоящее время (обратите внимание, что фрагмент кода все сжирает, поэтому посмотрите CodePen, чтобы увидеть, как на самом деле выглядит в настоящее время), а также здесь есть CodePen: https://codepen.io/anon/pen/vvdaYZ

.header-row {
  background-color: #003F7C;
}

.full-width-eight-normal {
  width: calc(66.6666666667%);
  float: left;
  margin-left: 0;
}

.full-width-four-normal {
  width: calc(33.3333333333%);
  float: left;
  margin-left: 0;
}

.meet-outer-div {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  overflow: hidden;
}

.main-row {
  background-color: #003F7C;
  min-height: 100%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}

.person-div {
  display: flex;
  flex-basis: calc(50% - 40px);
  justify-content: center;
  flex-direction: column;
  margin-right: 10px;
  margin-left: 10px;
  align-items: center;
}

<div class="meet-outer-div">
  <div class="full-width-eight-normal main-row">
    <div class="person-div">
      <img class="img-resize" src="https://placeimg.com/350/350/animals?random=12">
      <h2 class="white-text">Field Name </h2>
      <h4>Field Position </h4>
    </div>
    <div class="person-div">
      <img class="img-resize" src="https://placeimg.com/350/350/animals?random=12">
      <h2 class="white-text">Field Name </h2>
      <h4>Field Position </h4>
    </div>
    <div class="person-div">
      <img class="img-resize" src="https://placeimg.com/350/350/animals?random=12">
      <h2 class="white-text">Field Name </h2>
      <h4>Field Position </h4>
    </div>
    <div class="person-div">
      <img class="img-resize" src="https://placeimg.com/350/350/animals?random=12">
      <h2 class="white-text">Field Name </h2>
      <h4>Field Position </h4>
    </div>
  </div>
  <div class="full-width-four-normal numbers-div">
    <ul class="ul-no-bullets">
      <li class="margin-spacing">
        <p id="section-title">This</p>
      </li>
      <li class="margin-spacing">
        <p id="section-title">is Just</p>
      </li>
      <li class="margin-spacing">
        <p id="section-title">Right Side</p>
        <li>
          <p id="section-title">Filler</p>
        </li>
    </ul>
  </div>
</div>

Answer 1

Добавить align-self: start для тегов h2 и h4.

.header-row {
  background-color: #003F7C;
}

.person-div h2,
.person-div h4{
align-self:start
}

.full-width-eight-normal {
  width: calc(66.6666666667%);
  float: left;
  margin-left: 0;
}

.full-width-four-normal {
  width: calc(33.3333333333%);
  float: left;
  margin-left: 0;
}

.meet-outer-div {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  overflow: hidden;
}

.main-row {
  background-color: #003F7C;
  min-height: 100%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}

.person-div {
  display: flex;
  flex-basis: calc(50% - 40px);
  justify-content: center;
  flex-direction: column;
  margin-right: 10px;
  margin-left: 10px;
  align-items: center;
}

<div class="meet-outer-div">
  <div class="full-width-eight-normal main-row">
    <div class="person-div">
      <img class="img-resize" src="https://placeimg.com/350/350/animals?random=12">
      <h2 class="white-text">Field Name </h2>
      <h4>Field Position </h4>
    </div>
    <div class="person-div">
      <img class="img-resize" src="https://placeimg.com/350/350/animals?random=12">
      <h2 class="white-text">Field Name </h2>
      <h4>Field Position </h4>
    </div>
    <div class="person-div">
      <img class="img-resize" src="https://placeimg.com/350/350/animals?random=12">
      <h2 class="white-text">Field Name </h2>
      <h4>Field Position </h4>
    </div>
    <div class="person-div">
      <img class="img-resize" src="https://placeimg.com/350/350/animals?random=12">
      <h2 class="white-text">Field Name </h2>
      <h4>Field Position </h4>
    </div>
  </div>
  <div class="full-width-four-normal numbers-div">
    <ul class="ul-no-bullets">
      <li class="margin-spacing">
        <p id="section-title">This</p>
      </li>
      <li class="margin-spacing">
        <p id="section-title">is Just</p>
      </li>
      <li class="margin-spacing">
        <p id="section-title">Right Side</p>
        <li>
          <p id="section-title">Filler</p>
        </li>
    </ul>
  </div>
</div>

Answer 2

Используйте align-self: start для элементов, которые вы хотите выровнять по левому краю:

.header-row {
  background-color: #003F7C;
}

.full-width-eight-normal {
  width: calc(66.6666666667%);
  float: left;
  margin-left: 0;
}

.full-width-four-normal {
  width: calc(33.3333333333%);
  float: left;
  margin-left: 0;
}

.meet-outer-div {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  overflow: hidden;
}

.main-row {
  background-color: #003F7C;
  min-height: 100%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}

.person-div {
  display: flex;
  flex-basis: calc(50% - 40px);
  justify-content: center;
  flex-direction: column;
  margin-right: 10px;
  margin-left: 10px;
  align-items: center;
}
.person-div h2, .person-div h4  {
  align-self: start;
}

<div class="meet-outer-div">
  <div class="full-width-eight-normal main-row">
    <div class="person-div">
      <img class="img-resize" src="https://placeimg.com/350/350/animals?random=12">
      <h2 class="white-text">Field Name </h2>
      <h4>Field Position </h4>
    </div>
    <div class="person-div">
      <img class="img-resize" src="https://placeimg.com/350/350/animals?random=12">
      <h2 class="white-text">Field Name </h2>
      <h4>Field Position </h4>
    </div>
    <div class="person-div">
      <img class="img-resize" src="https://placeimg.com/350/350/animals?random=12">
      <h2 class="white-text">Field Name </h2>
      <h4>Field Position </h4>
    </div>
    <div class="person-div">
      <img class="img-resize" src="https://placeimg.com/350/350/animals?random=12">
      <h2 class="white-text">Field Name </h2>
      <h4>Field Position </h4>
    </div>
  </div>
  <div class="full-width-four-normal numbers-div">
    <ul class="ul-no-bullets">
      <li class="margin-spacing">
        <p id="section-title">This</p>
      </li>
      <li class="margin-spacing">
        <p id="section-title">is Just</p>
      </li>
      <li class="margin-spacing">
        <p id="section-title">Right Side</p>
        <li>
          <p id="section-title">Filler</p>
        </li>
    </ul>
  </div>
</div>

---

Если вы хотите, чтобы текст совпал с изображением, оберните его внутри дополнительной оболочки с помощью align-items: start:

.header-row {
  background-color: #003F7C;
}

.full-width-eight-normal {
  width: calc(66.6666666667%);
  float: left;
  margin-left: 0;
}

.full-width-four-normal {
  width: calc(33.3333333333%);
  float: left;
  margin-left: 0;
}

.meet-outer-div {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  overflow: hidden;
}

.main-row {
  background-color: #003F7C;
  min-height: 100%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
}

.person-div {
  display: flex;
  flex-basis: calc(50% - 40px);
  justify-content: center;
  padding: 0 10px;
  align-items: center;
}
.person-div div {
  display: flex;
  flex-direction: column;
  align-items: start;
}

<div class="meet-outer-div">
  <div class="full-width-eight-normal main-row">
    <div class="person-div">
      <div>
        <img class="img-resize" src="https://placeimg.com/350/350/animals?random=12">
        <h2 class="white-text">Field Name </h2>
        <h4>Field Position </h4>
      </div>
    </div>
    <div class="person-div">
      <div>
        <img class="img-resize" src="https://placeimg.com/350/350/animals?random=12">
        <h2 class="white-text">Field Name </h2>
        <h4>Field Position </h4>
      </div>
    </div>
    <div class="person-div">
      <div>
        <img class="img-resize" src="https://placeimg.com/350/350/animals?random=12">
        <h2 class="white-text">Field Name </h2>
        <h4>Field Position </h4>
      </div>
    </div>
    <div class="person-div">
      <div>
        <img class="img-resize" src="https://placeimg.com/350/350/animals?random=12">
        <h2 class="white-text">Field Name </h2>
        <h4>Field Position </h4>
      </div>
    </div>
  </div>
  <div class="full-width-four-normal numbers-div">
    <ul class="ul-no-bullets">
      <li class="margin-spacing">
        <p id="section-title">This</p>
      </li>
      <li class="margin-spacing">
        <p id="section-title">is Just</p>
      </li>
      <li class="margin-spacing">
        <p id="section-title">Right Side</p>
        <li>
          <p id="section-title">Filler</p>
        </li>
    </ul>
  </div>
</div>