Как вы центрируете контент во flexbox

Question

У меня есть изображения и текст, и они в настоящее время расположены на левой стороне flexbox.

Проблема, с которой я столкнулся, заключается в том, что все, что больше 1000 пикселей в размере браузера, оставляет большое открытое пространство с правой стороны. Поэтому я хочу, чтобы ширина браузера составляла 1000 пикселей или больше по центру содержимого, чтобы я мог избавиться от пробелов.

У меня проблемы с центрированием этих элементов в перерыве в работе СМИ. Мне нужна помощь, чтобы сосредоточиться на этих условиях.

section {
    display: flex;
    flex-flow: wrap;
    align-items: flex-start;
    
    width: 80%;
    margin: 1em auto;
    
    border: solid .125em #00aaff;
    background-color: white;
    opacity: 0.9;
}

section > figure {
    flex: 1 1 25%;
    text-align: center;
    align-self: center;
    padding: 1em 0em;

}

section > article {
    flex: 1 1 75%;
    align-self: center;
    line-height: 1.6;
    padding: 1em 0em;
}

figure img {
    width: 75%;
}

@media screen and (min-width:1000px) {
     /*Center the content in the middle of the flexbox*/
}

<section>   
        <figure id="image1">
            <img src="images/512x512.png" alt="Dynamo">
        </figure>
         
        <article>
                <p>Houston Dynamo</p>
                <p>Sport Science/Sport Performance Intern</p>
                <p><time datetime="2018-01-01"></time>January 2019 - Present</p>
        </article>
        
        <figure>
            <img src="images/UW-Logo.png" alt="Wisconsion">
        </figure>
        
         <article>
                <p>University of Madison Wisconsin-Madison</p>
                <p>Strength and Conditioning Coach, Graduate Assistant</p>
                <p><time datetime="2011-08-01"></time>August 2018 - <time datetime="2014-12-31">December 2018</time></p>
        </article>

Answer 1

Не могли бы вы просто продолжить использовать flexbox и использовать justify-content:center;?

section {
  display: flex;
  flex-direction: row;
  width: 100%;
  border: solid .125em #00aaff;
}

@media screen and (min-width: 1000px) {
  section {
    justify-content:center;
  }
}

<section>
  <figure id="image1">
    <img src="//placehold.it/100x100" alt="Dynamo">
  </figure>

  <article>
    <p>Houston Dynamo</p>
    <p>Sport Science/Sport Performance Intern</p>
    <p><time datetime="2018-01-01"></time>January 2019 - Present</p>
  </article>

</section>
<section>
  <figure>
    <img src="//placehold.it/100x100" alt="Wisconsion">
  </figure>

  <article>
    <p>University of Madison Wisconsin-Madison</p>
    <p>Strength and Conditioning Coach, Graduate Assistant</p>
    <p><time datetime="2011-08-01"></time>August 2018 - <time datetime="2014-12-31">December 2018</time></p>
  </article>
</section>

Answer 2

Используйте margin: 0 auto для центрирования раздела.

section {
  display: flex;
  flex-direction: row;
  width: 100%;
  border: solid .125em #00aaff;
}

@media screen and (min-width: 1000px) {
  section {
    width: 50%;
    margin: 0 auto;
  }
}

<section>
  <figure id="image1">
    <img src="//placehold.it/100x100" alt="Dynamo">
  </figure>

  <article>
    <p>Houston Dynamo</p>
    <p>Sport Science/Sport Performance Intern</p>
    <p><time datetime="2018-01-01"></time>January 2019 - Present</p>
  </article>

</section>
<section>
  <figure>
    <img src="//placehold.it/100x100" alt="Wisconsion">
  </figure>

  <article>
    <p>University of Madison Wisconsin-Madison</p>
    <p>Strength and Conditioning Coach, Graduate Assistant</p>
    <p><time datetime="2011-08-01"></time>August 2018 - <time datetime="2014-12-31">December 2018</time></p>
  </article>
</section>