使用 CSS 使 flex 元素居中而不考虑屏幕尺寸
Using CSS to center flex elements regardless of screen size
问题摘要：我无法弄清楚为什么我的网页上的图像只在屏幕较小时居中，而在我的桌面上，图像是左对齐的。
问题正文：我是第一次使用 HTML 和 CSS 构建网站，虽然我正在学习大量教程和阅读资源，但我仍然对这个概念感到困惑弹性项目。在我当前的网站上，我有三个水平排列的图像，当我在笔记本电脑上查看页面时，它们居中。但是，当我在较大的桌面上查看它时，所有图像都是左对齐的。我在这里搜索了几十页关于 CSS 中的项目居中的内容，但到目前为止没有任何意义——这可能是由于我自己天真地使用了 CSS 和 HTML。我在下面 post 编辑了我的 CSS 和 HTML 代码。当我展开屏幕时，这段代码中是否存在错误地左对齐图像的内容？ （注意：这是我关于 Stack Overflow 的第一个问题，虽然我已经阅读了 posting 问题的指南，但我希望您能就如何使这个问题更清楚提供任何反馈）。谢谢！ （另外，仅供参考，因为这是我的第一个 post 我还不能嵌入图像，否则我会得到我正在谈论的内容的屏幕截图）。
/* Box Model */
*,
*:before,
*:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
/* Containers */
.container {
margin-left: auto;
margin-right: auto;
}
.container. 25 {
width: 100%;
max-width: 100em;
min-width: 80em;
}
.container. 5 {
width: 60em;
}
.container. 0 {
width: 40em;
}
.container. 5 {
width: 20em;
}
.container {
width: 80em;
}
@media screen and (max-width: 1680px) {
.container. 25 {
width: 100%;
max-width: 100em;
min-width: 80em;
}
.container. 5 {
width: 60em;
}
.container. 0 {
width: 40em;
}
.container. 5 {
width: 20em;
}
.container {
width: 80em;
}
}
@media screen and (max-width: 1280px) {
.container. 25 {
width: 100%;
max-width: 81.25em;
min-width: 65em;
}
.container. 5 {
width: 48.75em;
}
.container. 0 {
width: 32.5em;
}
.container. 5 {
width: 16.25em;
}
.container {
width: 65em;
}
}
@media screen and (max-width: 980px) {
.container. 25 {
width: 100%;
max-width: 112.5%;
min-width: 90%;
}
.container. 5 {
width: 67.5%;
}
.container. 0 {
width: 45%;
}
.container. 5 {
width: 22.5%;
}
.container {
width: 90%;
}
}
@media screen and (max-width: 736px) {
.container. 25 {
width: 100%;
max-width: 112.5%;
min-width: 90%;
}
.container. 5 {
width: 67.5%;
}
.container. 0 {
width: 45%;
}
.container. 5 {
width: 22.5%;
}
.container {
width: 90% !important;
}
}
@media screen and (max-width: 480px) {
.container. 25 {
width: 100%;
max-width: 112.5%;
min-width: 90%;
}
.container. 5 {
width: 67.5%;
}
.container. 0 {
width: 45%;
}
.container. 5 {
width: 22.5%;
}
.container {
width: 90% !important;
}
}
/* Flex */
.flex {
display: -ms-flexbox;
-ms-flex-wrap: nowrap;
-ms-flex-pack: justify;
-moz-justify-content: center;
-webkit-justify-content: center;
-ms-justify-content: center;
justify-content: center;
align-items: center;
display: -moz-flex;
display: -webkit-flex;
display: -ms-flex;
display: flex;
-moz-flex-wrap: nowrap;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
width: 100%;
max-width: 900px;
min-width: 500px;
}
.flex.flex-2 {
-moz-justify-content: center;
-webkit-justify-content: center;
-ms-justify-content: center;
justify-content: center;
}
.flex.flex-2 article {
width: 100%;
}
@media screen and (max-width: 980px) {
.flex.flex-2 article {
width: 100%;
margin-bottom: 3em;
auto
}
.flex.flex-2 article:last-child {
margin-bottom: 0;
auto
}
}
@media screen and (max-width: 480px) {
.flex.flex-2 br {
display: none;
}
}
/* Box */
.box {
border: solid 1px #dbdbdb;
margin-bottom: 2em;
padding: 1.5em;
}
.box> :last-child,
.box> :last-child> :last-child,
.box> :last-child> :last-child> :last-child {
margin-bottom: 0;
}
.box.alt {
border: 0;
border-radius: 0;
padding: 0;
}
.box.person {
border: solid 1px #8dcca9;
padding: 3em 1.5em;
}
.box.person h3 {
margin: 0;
}
.box.person .image {
margin-bottom: 1em;
}
.box.person .image img {
max-width: 100%;
}
<!-- Main -->
<section id="main" class="wrapper">
<div class="inner">
<header class="align-center">
<h2>A comprehensive collection of workshops, webinars, and resources for Belmont Forum researchers</h2>
</header>
<section id="three" class="wrapper align-center">
<div class="inner">
<div class="flex flex-2">
<article>
<div class="w3-circle">
<img src="images/globe.jpg" alt="Pic 02" />
</div>
<header>
<h3>By Country/Region</h3>
</header>
<footer>
<a href="Data_Management_Trainings.md" target="_blank" class="button">Find Resources</a>
</footer>
</article>
<article>
<div class="w3-circle">
<img src="images/computer.jpg" alt="Pic 01" />
</div>
<header>
<h3>By Resource Type</h3>
</header>
<footer>
<a href="http://bfe-inf.org/sites/default/files/doc-repository/Outline_Data_Skills_Curricula_Framework.pdf" target=_blank " class="button ">Find Resources</a>
</footer>
</article>
<article>
<div class="w3-circle ">
<img src="images/business_woman.jpg " alt="globe " />
</div>
<header>
<h3>By Role</h3>
</header>
<footer>
<a href="http://bfe-inf.org/sites/default/files/doc-repository/Outline_Data_Skills_Curricula_Framework.pdf " target=_blank" class="button">Find Resources</a>
</footer>
</article>
</div>
</div>
</section>
.inner {
display: flex;
justify-content: center;
}
你的 .flex .flex-2 div 是左对齐的，因为它的父 div .inner 从左到右渲染它的内容（这是块元素的默认行为) & 你的 div 被绑定到一个特定的宽度。
Flexbox 就是使用父容器来对齐它们的子元素 - justify-content & align-items 可用于将您的元素从父元素居中。 :)
不知道我是否真的理解你的问题。所以我试了一下。
希望对您有所帮助！
body {
padding: 0;
margin: 0;
}
label:hover {
cursor: pointer;
}
#table {
padding: 3em;
}
#table h2 {
margin-bottom: 2em;
}
#table input[name="tcol"],
#table nav {
display: none;
}
#table h2 {
text-align: center;
width: 100%;
}
#table nav {
display: none;
justify-content: center;
padding: 0 1em;
}
#table nav > label {
color: #339bf0;
display: inline-block;
padding: 1em;
}
#table table {
border-collapse: separate;
border-spacing: 0;
overflow: hidden;
width: 100%;
}
#table table td,
#table table th {
padding: 1em;
width: 33.33%;
text-align: center;
}
#table table tbody > tr > td h3 {
margin-bottom: 0.05em;
text-align: center;
}
#table table tfoot > tr > td {
text-align: center;
}
#table table.data-table.two-col td,
#table table.data-table.two-col th {
width: 50%;
}
#table table.data-table.three-col td,
#table table.data-table.three-col th {
width: 33.33%;
}
#table table.data-table.four-col td,
#table table.data-table.four-col th {
width: 25%;
}
#table table.data-table.five-col td,
#table table.data-table.five-col th {
width: 20%;
}
#table table.data-table.six-col td,
#table table.data-table.six-col th {
width: 16.67%;
}
#table table.data-table.seven-col td,
#table table.data-table.seven-col th {
width: 14.29%;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
#table {
padding: 1em;
}
#table h2 {
margin-bottom: 0;
}
#table nav {
display: flex;
}
#table table th,
#table table td {
display: none;
width: 100%;
}
#table table.data-table[class*="-col"] th,
#table table.data-table[class*="-col"] td {
width: 100%;
}
#table input:checked:nth-of-type(1) ~ nav label:nth-of-type(1) {
border-bottom: 3px solid #000000;
color: black;
}
#table input:checked:nth-of-type(1) ~ table tr > td:nth-of-type(1),
#table input:checked:nth-of-type(1) ~ table tr > th:nth-of-type(1) {
display: table-cell;
}
#table input:checked:nth-of-type(2) ~ nav label:nth-of-type(2) {
border-bottom: 3px solid #000000;
color: black;
}
#table input:checked:nth-of-type(2) ~ table tr > td:nth-of-type(2),
#table input:checked:nth-of-type(2) ~ table tr > th:nth-of-type(2) {
display: table-cell;
}
#table input:checked:nth-of-type(3) ~ nav label:nth-of-type(3) {
border-bottom: 3px solid #000000;
color: black;
}
#table input:checked:nth-of-type(3) ~ table tr > td:nth-of-type(3),
#table input:checked:nth-of-type(3) ~ table tr > th:nth-of-type(3) {
display: table-cell;
}
}
<div id="table">
<h2>A comprehensive collection of workshops, webinars, and resources for Belmont Forum researchers</h2>
<input id="tcol1" name="tcol" type="radio" checked/>
<input id="tcol2" name="tcol" type="radio" />
<input id="tcol3" name="tcol" type="radio" />
<nav>
<label for="tcol1">Region</label>
<label for="tcol2">Type</label>
<label for="tcol3">Role</label>
</nav>
<table class="data-table">
<colgroup>
<col>
<col>
<col>
</colgroup>
<tbody>
<tr>
<td><img src="images/globe.jpg" alt="Pic 02" /></td>
<td><img src="images/computer.jpg" alt="Pic 01" /></td>
<td><img src="images/business_woman.jpg" alt="globe" /></td>
</tr>
<tr>
<td>
<h3>By Country/Region</h3>
</td>
<td>
<h3>By Resource Type</h3>
</td>
<td>
<h3>By Role</h3>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
<h3><a href="Data_Management_Trainings.md" target ="_blank" class="button">Find Resources</a></h3>
</td>
<td>
<h3><a href="http://bfe-inf.org/sites/default/files/doc-repository/Outline_Data_Skills_Curricula_Framework.pdf" target="_blank" class="button">Find Resources</a></h3>
</td>
<td>
<h3><a href="http://bfe-inf.org/sites/default/files/doc-repository/Outline_Data_Skills_Curricula_Framework.pdf" target="_blank" class="button">Find Resources</a></h3>
</td>
</tr>
</tfoot>
</table>
</div>
问题摘要：我无法弄清楚为什么我的网页上的图像只在屏幕较小时居中，而在我的桌面上，图像是左对齐的。
问题正文：我是第一次使用 HTML 和 CSS 构建网站，虽然我正在学习大量教程和阅读资源，但我仍然对这个概念感到困惑弹性项目。在我当前的网站上，我有三个水平排列的图像，当我在笔记本电脑上查看页面时，它们居中。但是，当我在较大的桌面上查看它时，所有图像都是左对齐的。我在这里搜索了几十页关于 CSS 中的项目居中的内容，但到目前为止没有任何意义——这可能是由于我自己天真地使用了 CSS 和 HTML。我在下面 post 编辑了我的 CSS 和 HTML 代码。当我展开屏幕时，这段代码中是否存在错误地左对齐图像的内容？ （注意：这是我关于 Stack Overflow 的第一个问题，虽然我已经阅读了 posting 问题的指南，但我希望您能就如何使这个问题更清楚提供任何反馈）。谢谢！ （另外，仅供参考，因为这是我的第一个 post 我还不能嵌入图像，否则我会得到我正在谈论的内容的屏幕截图）。
/* Box Model */
*,
*:before,
*:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
/* Containers */
.container {
margin-left: auto;
margin-right: auto;
}
.container. 25 {
width: 100%;
max-width: 100em;
min-width: 80em;
}
.container. 5 {
width: 60em;
}
.container. 0 {
width: 40em;
}
.container. 5 {
width: 20em;
}
.container {
width: 80em;
}
@media screen and (max-width: 1680px) {
.container. 25 {
width: 100%;
max-width: 100em;
min-width: 80em;
}
.container. 5 {
width: 60em;
}
.container. 0 {
width: 40em;
}
.container. 5 {
width: 20em;
}
.container {
width: 80em;
}
}
@media screen and (max-width: 1280px) {
.container. 25 {
width: 100%;
max-width: 81.25em;
min-width: 65em;
}
.container. 5 {
width: 48.75em;
}
.container. 0 {
width: 32.5em;
}
.container. 5 {
width: 16.25em;
}
.container {
width: 65em;
}
}
@media screen and (max-width: 980px) {
.container. 25 {
width: 100%;
max-width: 112.5%;
min-width: 90%;
}
.container. 5 {
width: 67.5%;
}
.container. 0 {
width: 45%;
}
.container. 5 {
width: 22.5%;
}
.container {
width: 90%;
}
}
@media screen and (max-width: 736px) {
.container. 25 {
width: 100%;
max-width: 112.5%;
min-width: 90%;
}
.container. 5 {
width: 67.5%;
}
.container. 0 {
width: 45%;
}
.container. 5 {
width: 22.5%;
}
.container {
width: 90% !important;
}
}
@media screen and (max-width: 480px) {
.container. 25 {
width: 100%;
max-width: 112.5%;
min-width: 90%;
}
.container. 5 {
width: 67.5%;
}
.container. 0 {
width: 45%;
}
.container. 5 {
width: 22.5%;
}
.container {
width: 90% !important;
}
}
/* Flex */
.flex {
display: -ms-flexbox;
-ms-flex-wrap: nowrap;
-ms-flex-pack: justify;
-moz-justify-content: center;
-webkit-justify-content: center;
-ms-justify-content: center;
justify-content: center;
align-items: center;
display: -moz-flex;
display: -webkit-flex;
display: -ms-flex;
display: flex;
-moz-flex-wrap: nowrap;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
width: 100%;
max-width: 900px;
min-width: 500px;
}
.flex.flex-2 {
-moz-justify-content: center;
-webkit-justify-content: center;
-ms-justify-content: center;
justify-content: center;
}
.flex.flex-2 article {
width: 100%;
}
@media screen and (max-width: 980px) {
.flex.flex-2 article {
width: 100%;
margin-bottom: 3em;
auto
}
.flex.flex-2 article:last-child {
margin-bottom: 0;
auto
}
}
@media screen and (max-width: 480px) {
.flex.flex-2 br {
display: none;
}
}
/* Box */
.box {
border: solid 1px #dbdbdb;
margin-bottom: 2em;
padding: 1.5em;
}
.box> :last-child,
.box> :last-child> :last-child,
.box> :last-child> :last-child> :last-child {
margin-bottom: 0;
}
.box.alt {
border: 0;
border-radius: 0;
padding: 0;
}
.box.person {
border: solid 1px #8dcca9;
padding: 3em 1.5em;
}
.box.person h3 {
margin: 0;
}
.box.person .image {
margin-bottom: 1em;
}
.box.person .image img {
max-width: 100%;
}
<!-- Main -->
<section id="main" class="wrapper">
<div class="inner">
<header class="align-center">
<h2>A comprehensive collection of workshops, webinars, and resources for Belmont Forum researchers</h2>
</header>
<section id="three" class="wrapper align-center">
<div class="inner">
<div class="flex flex-2">
<article>
<div class="w3-circle">
<img src="images/globe.jpg" alt="Pic 02" />
</div>
<header>
<h3>By Country/Region</h3>
</header>
<footer>
<a href="Data_Management_Trainings.md" target="_blank" class="button">Find Resources</a>
</footer>
</article>
<article>
<div class="w3-circle">
<img src="images/computer.jpg" alt="Pic 01" />
</div>
<header>
<h3>By Resource Type</h3>
</header>
<footer>
<a href="http://bfe-inf.org/sites/default/files/doc-repository/Outline_Data_Skills_Curricula_Framework.pdf" target=_blank " class="button ">Find Resources</a>
</footer>
</article>
<article>
<div class="w3-circle ">
<img src="images/business_woman.jpg " alt="globe " />
</div>
<header>
<h3>By Role</h3>
</header>
<footer>
<a href="http://bfe-inf.org/sites/default/files/doc-repository/Outline_Data_Skills_Curricula_Framework.pdf " target=_blank" class="button">Find Resources</a>
</footer>
</article>
</div>
</div>
</section>
.inner {
display: flex;
justify-content: center;
}
你的 .flex .flex-2 div 是左对齐的，因为它的父 div .inner 从左到右渲染它的内容（这是块元素的默认行为) & 你的 div 被绑定到一个特定的宽度。
Flexbox 就是使用父容器来对齐它们的子元素 - justify-content & align-items 可用于将您的元素从父元素居中。 :)
不知道我是否真的理解你的问题。所以我试了一下。 希望对您有所帮助！
body {
padding: 0;
margin: 0;
}
label:hover {
cursor: pointer;
}
#table {
padding: 3em;
}
#table h2 {
margin-bottom: 2em;
}
#table input[name="tcol"],
#table nav {
display: none;
}
#table h2 {
text-align: center;
width: 100%;
}
#table nav {
display: none;
justify-content: center;
padding: 0 1em;
}
#table nav > label {
color: #339bf0;
display: inline-block;
padding: 1em;
}
#table table {
border-collapse: separate;
border-spacing: 0;
overflow: hidden;
width: 100%;
}
#table table td,
#table table th {
padding: 1em;
width: 33.33%;
text-align: center;
}
#table table tbody > tr > td h3 {
margin-bottom: 0.05em;
text-align: center;
}
#table table tfoot > tr > td {
text-align: center;
}
#table table.data-table.two-col td,
#table table.data-table.two-col th {
width: 50%;
}
#table table.data-table.three-col td,
#table table.data-table.three-col th {
width: 33.33%;
}
#table table.data-table.four-col td,
#table table.data-table.four-col th {
width: 25%;
}
#table table.data-table.five-col td,
#table table.data-table.five-col th {
width: 20%;
}
#table table.data-table.six-col td,
#table table.data-table.six-col th {
width: 16.67%;
}
#table table.data-table.seven-col td,
#table table.data-table.seven-col th {
width: 14.29%;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
#table {
padding: 1em;
}
#table h2 {
margin-bottom: 0;
}
#table nav {
display: flex;
}
#table table th,
#table table td {
display: none;
width: 100%;
}
#table table.data-table[class*="-col"] th,
#table table.data-table[class*="-col"] td {
width: 100%;
}
#table input:checked:nth-of-type(1) ~ nav label:nth-of-type(1) {
border-bottom: 3px solid #000000;
color: black;
}
#table input:checked:nth-of-type(1) ~ table tr > td:nth-of-type(1),
#table input:checked:nth-of-type(1) ~ table tr > th:nth-of-type(1) {
display: table-cell;
}
#table input:checked:nth-of-type(2) ~ nav label:nth-of-type(2) {
border-bottom: 3px solid #000000;
color: black;
}
#table input:checked:nth-of-type(2) ~ table tr > td:nth-of-type(2),
#table input:checked:nth-of-type(2) ~ table tr > th:nth-of-type(2) {
display: table-cell;
}
#table input:checked:nth-of-type(3) ~ nav label:nth-of-type(3) {
border-bottom: 3px solid #000000;
color: black;
}
#table input:checked:nth-of-type(3) ~ table tr > td:nth-of-type(3),
#table input:checked:nth-of-type(3) ~ table tr > th:nth-of-type(3) {
display: table-cell;
}
}
<div id="table">
<h2>A comprehensive collection of workshops, webinars, and resources for Belmont Forum researchers</h2>
<input id="tcol1" name="tcol" type="radio" checked/>
<input id="tcol2" name="tcol" type="radio" />
<input id="tcol3" name="tcol" type="radio" />
<nav>
<label for="tcol1">Region</label>
<label for="tcol2">Type</label>
<label for="tcol3">Role</label>
</nav>
<table class="data-table">
<colgroup>
<col>
<col>
<col>
</colgroup>
<tbody>
<tr>
<td><img src="images/globe.jpg" alt="Pic 02" /></td>
<td><img src="images/computer.jpg" alt="Pic 01" /></td>
<td><img src="images/business_woman.jpg" alt="globe" /></td>
</tr>
<tr>
<td>
<h3>By Country/Region</h3>
</td>
<td>
<h3>By Resource Type</h3>
</td>
<td>
<h3>By Role</h3>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
<h3><a href="Data_Management_Trainings.md" target ="_blank" class="button">Find Resources</a></h3>
</td>
<td>
<h3><a href="http://bfe-inf.org/sites/default/files/doc-repository/Outline_Data_Skills_Curricula_Framework.pdf" target="_blank" class="button">Find Resources</a></h3>
</td>
<td>
<h3><a href="http://bfe-inf.org/sites/default/files/doc-repository/Outline_Data_Skills_Curricula_Framework.pdf" target="_blank" class="button">Find Resources</a></h3>
</td>
</tr>
</tfoot>
</table>
</div>