不管屏幕大小如何，都可以使用CSS将flex元素居中

时间：2018-09-24 19:48:13

标签： html css flexbox centering

问题摘要：我无法弄清楚为什么只有在屏幕较小时而不是在桌面上将图像左对齐的情况下，网页上的图像才会居中。

问题主体：我是第一次使用HTML和CSS建立一个网站，尽管我正在学习大量教程和阅读资源，但我仍然对flex项目的概念感到困惑。在我当前的网站上，我有3张水平排列的图像，当我在笔记本电脑上查看页面时，它们居中。但是，当我在较大的桌面上查看时，所有图像都是左对齐的。我在这里搜索了数十页有关将CSS居中居中的页面，但到目前为止没有任何意义-可能是由于我天真地使用CSS和HTML。我已经在下面发布了我的CSS和HTML代码。扩展屏幕时，此代码中是否有某些错误地使图像左对齐？ （注意：这是我关于Stack Overflow的第一个问题，在阅读了有关发布问题的指南时，我希望收到您对如何使问题更加清楚的任何反馈）。谢谢！ （此外，仅供参考，因为这是我的第一篇文章，所以我还不能嵌入图像，否则我将获得我所谈论内容的屏幕截图）。 

/* 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.\31 25\25 {
  width: 100%;
  max-width: 100em;
  min-width: 80em;
}

.container.\37 5\25 {
  width: 60em;
}

.container.\35 0\25 {
  width: 40em;
}

.container.\32 5\25 {
  width: 20em;
}

.container {
  width: 80em;
}

@media screen and (max-width: 1680px) {
  .container.\31 25\25 {
    width: 100%;
    max-width: 100em;
    min-width: 80em;
  }
  .container.\37 5\25 {
    width: 60em;
  }
  .container.\35 0\25 {
    width: 40em;
  }
  .container.\32 5\25 {
    width: 20em;
  }
  .container {
    width: 80em;
  }
}

@media screen and (max-width: 1280px) {
  .container.\31 25\25 {
    width: 100%;
    max-width: 81.25em;
    min-width: 65em;
  }
  .container.\37 5\25 {
    width: 48.75em;
  }
  .container.\35 0\25 {
    width: 32.5em;
  }
  .container.\32 5\25 {
    width: 16.25em;
  }
  .container {
    width: 65em;
  }
}

@media screen and (max-width: 980px) {
  .container.\31 25\25 {
    width: 100%;
    max-width: 112.5%;
    min-width: 90%;
  }
  .container.\37 5\25 {
    width: 67.5%;
  }
  .container.\35 0\25 {
    width: 45%;
  }
  .container.\32 5\25 {
    width: 22.5%;
  }
  .container {
    width: 90%;
  }
}

@media screen and (max-width: 736px) {
  .container.\31 25\25 {
    width: 100%;
    max-width: 112.5%;
    min-width: 90%;
  }
  .container.\37 5\25 {
    width: 67.5%;
  }
  .container.\35 0\25 {
    width: 45%;
  }
  .container.\32 5\25 {
    width: 22.5%;
  }
  .container {
    width: 90% !important;
  }
}

@media screen and (max-width: 480px) {
  .container.\31 25\25 {
    width: 100%;
    max-width: 112.5%;
    min-width: 90%;
  }
  .container.\37 5\25 {
    width: 67.5%;
  }
  .container.\35 0\25 {
    width: 45%;
  }
  .container.\32 5\25 {
    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>

2 个答案:

答案 0 :(得分：0)

.inner {
    display: flex;
    justify-content: center;
}

您的.flex .flex-2 div左对齐，因为其父div .inner从左到右呈现其内容（这是块元素的默认行为），并且div绑定到特定宽度。 Flexbox是关于使用父容器对齐其子元素的所有方法-justify-content和align-items可用于使父元素的元素居中。 ：）

答案 1 :(得分：0)

我不知道我是否真的理解你的问题。所以我尝试了一下。 希望对您有帮助！

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>

相关问题
最新问题