Flexbox align-items 在 Firefox 中的表格元素上不起作用答案

【问题标题】：Flexbox align-items not working on table element in FirefoxFlexbox align-items 在 Firefox 中的表格元素上不起作用
【发布时间】：2017-12-18 11:03:31
【问题描述】：

在我的 HTML 文档中，我有一个 article 标记，它具有以下样式：

width: 100%;
display: flex;
flex-direction: column
align-items: center;

它的所有子代都有：

width: 600px;
margin-top: 1em;

不过，tablechildren 有这种风格：

width: auto;
min-width: 600px;
max-width: 100%;
border-collapse: collapse;
margin-top: 3em;

我的目的是让所有的孩子都在彼此之上，表现得像一个普通的文章风格，但是像table和img这样的标签应该有可调节的宽度，因为它们的内容可能会有很大的不同。

但是，在 Firefox 中，table 标签不居中。相反，它们与左侧对齐。

我尝试过申请align-self: center，但没有成功。浏览器默认样式是align-self: auto，所以没问题。

我担心它与所有表的默认 display: table 有关。我尝试将其更改为display: block，但它的行为很奇怪，可能是因为它丢失了表属性。

I've written my code in CodePen.

body {
  font-family: Georgia;
  font-size: 14px;
  line-height: 1.618;
  background-color: #f2f2f2;
}

article {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

article>* {
  width: 600px;
  margin-top: 1em;
}

article table {
  width: auto;
  min-width: 600px;
  max-width: 100%;
  border-collapse: collapse;
  margin-top: 3em;
}

article table+* {
  margin-top: 3em;
}

article table caption {
  width: 100%;
  text-align: center;
  caption-side: bottom;
}

article table thead {
  border-bottom: 1px solid black;
}

article table tbody {
  border-bottom: 1px solid black;
}

article table tbody td,
article table tbody th {
  padding-top: 0.6em;
  padding-bottom: 0.6em;
  border-bottom: 1px solid black;
}

article table td,
article table th {
  padding-left: 0.6em;
  padding-right: 0.6em;
}

article table th {
  text-align: left;
}

<article>
  <h1>h1 title here</h1>
  <p>This text is an article tag. Its width is 100%, and it has the following style: </p>
  <ul>
    <li>display: flex</li>
    <li>flex-direction: column</li>
    <li>align-items: center</li>
  </ul>
  <p>All of its children have a fixed width, but the table, which only have a <i>min-width</i> and <i>width: auto.</i></p>
  <p>The <i>align-items: center</i> applied to the article tag should make all the elements centered. However, in Firefox, the table aligns to the left.</p>


  <table>
    <caption>table caption here.</caption>
    <thead>
      <tr>
        <th>Lorem ipsum dolor sit.</th>
        <th>Lorem ipsum dolor sit.</th>
        <th>Lorem ipsum dolor sit.</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Lorem, ipsum dolor.</td>
        <td>Lorem, ipsum dolor.</td>
        <td>Lorem, ipsum dolor.</td>
      </tr>
      <tr>
        <td>Lorem, ipsum dolor.</td>
        <td>Lorem, ipsum dolor.</td>
        <td>Lorem, ipsum dolor.</td>
      </tr>
      <tr>
        <td>Lorem, ipsum dolor.</td>
        <td>Lorem, ipsum dolor.</td>
        <td>Lorem, ipsum dolor.</td>
      </tr>
      <tr>
        <td>Lorem, ipsum dolor.</td>
        <td>Lorem, ipsum dolor.</td>
        <td>Lorem, ipsum dolor.</td>
      </tr>
      <tr>
        <td>Lorem, ipsum dolor.</td>
        <td>Lorem, ipsum dolor.</td>
        <td>Lorem, ipsum dolor.</td>
      </tr>
    </tbody>
  </table>
  <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Culpa recusandae temporibus distinctio explicabo vero amet repellat et, eligendi commodi laudantium veniam consequuntur doloremque deleniti corporis voluptates dolorum similique tempore, omnis
    corrupti fugit. Voluptas autem dicta dolorum quidem aliquam ab, iusto rerum facilis! Minus repellat iste officia dicta totam harum magnam?</p>


  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis labore non ipsum error exercitationem repellendus eos eaque culpa fuga! Quis unde impedit neque, reprehenderit sed commodi, explicabo et eaque illo, est porro at dignissimos in sequi?
    Sunt voluptas ratione, quisquam, beatae explicabo ullam amet maiores eligendi aliquid assumenda ab minima?</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem asperiores tenetur, recusandae quaerat, blanditiis incidunt enim odio veritatis et praesentium maiores a sequi ipsam cum officia cumque odit, ipsum expedita assumenda. Excepturi, natus
    fuga. Odit, cupiditate fugit? Et laborum eos tempore sed quidem, debitis, minus nisi consectetur a, expedita quaerat!</p>

</article>

【问题讨论】：

标签： html css firefox flexbox

【解决方案1】：

在表格上将 margin-left 和 margin-right 设置为 auto 也会从标题中移除 100% 的宽度。

table{
    width: auto;
    min-width: 600px;
    max-width: 100%;
    border-collapse: collapse;
    margin-top: 3em;
    margin-left: auto;
    margin-right: auto;
    & + *{
        margin-top: 3em;
    }

    caption{
        text-align: center;
        caption-side: bottom;
    }

https://codepen.io/anon/pen/weNxGZ

【讨论】：

太棒了！在这里删除caption 标签的width: 100% 就足够了，但我也会更改table 边距，以确保。谢谢。
啊，是的，在这种情况下似乎根本不需要自动边距

【解决方案2】：

添加

margin-left: auto;
margin-right: auto;

在您的 table 和 caption 上，并从 caption 中删除 width:100% codepen

【讨论】：

【解决方案3】：

我担心它与所有表的默认 display: table 有关。我尝试将其更改为display: block，但它的行为很奇怪，可能是因为它丢失了表属性。

我认为您在这里可能是正确的。它与固有的表属性有关。

如果是这样，简单的解决方案是将表格包装在 div 中。让 div 成为 flex 容器的子元素。

否则，将左右 auto margins 添加到表本身。

请务必记住，当您将元素设为 flex 容器时，其所有子项都将成为 flex 项。结果，他们失去了接受新的display 值的能力。无论您为弹性项目赋予的display 值如何，都会被弹性容器（spec reference）覆盖。显然，Chrome 和 Firefox 处理这个问题的方式不同。

这是一个相关的帖子：Flexbox on table doesn't work in Firefox

【讨论】：