Question

我有图像和文本，它们当前位于flexbox的左侧。

我遇到的问题是，浏览器大小超过1000像素的任何内容都会在右侧留下很大的空白空间。因此，我想做的是，如果浏览器的宽度为1000px或更大，以内容为中心，这样我就可以摆脱空白。

我无法在媒体休息时间集中这些项目。我需要针对这些情况的帮助。

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

使用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>

Answer 2

您会继续使用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>

如何在Flexbox中居中放置内容

2 个答案: