html - 为什么第二个元素不会在 div 中居中？

Question

HTML

<div id="flexbox-container">
  <h1 id="test1">test1</h1><h1 id="test2">test2</h1><h1 id="test3">test3</h1>
</div>

CSS

#flexbox-container {
      display:inline-flex;
    }
#test1 {
      float:left;
    }
    #test2 {
      justify-content:center;
      align-items:center;
      text-align:center;
      align-self:center;
      align-content:center;
    }
    #test3 {
      position:relative;
      left:1000px;
    }

为什么 test2 不在 flex 中居中？我宁愿不必设置 px 或边距来使其居中。我尝试了各种对齐方法，但它仍然粘在左边。我需要这三个元素是内联的，所以将它设置为 flex 是行不通的(尽管如果我让它 flex 它会居中对齐)，请帮助我已经尝试了几天

https://codepen.io/throwaway123/pen/mdpJJKY

Answer 1

只有这么多代码就够了。不需要为单独的 h1 标签使用所有这些样式。您必须将对齐样式提供给父 div。

#flexbox-container {
  width: 100%;
  display:inline-flex;
  justify-content: space-between;
}

<div id="flexbox-container">
  <h1 id="test1">test1</h1>
  <h1 id="test2">test2</h1>
  <h1 id="test3">test3</h1> 
</div>