我有图片和文字,它们目前位于 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>
最佳答案
使用 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>
关于html - 你如何在 flexbox 中居中内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56386971/