html - 左对齐和居中对齐 div 中的元素？

Question

如何布局一个元素居中而另一个元素左对齐的 div 内容。

我已经尝试过 flexbox - 如果不添加隐藏的第三个元素并证明内容是不可能的。

我也尝试过在父级上对齐文本，但随后所有内容都以一种方式对齐(居中或左对齐)。

HTML:

.left{

}

.center{

}

<div class="container">
  <div class="left">
    I'm left aligned
  </div>
  <div class="center">
    I'm center aligned
  </div>
</div>

编辑

我正在对齐 div 本身，并相对于父元素居中。

Answer 1

你可以对隐藏元素使用 flex 和 :after 元素:

.container {
  display: flex;
  border: 1px solid #000;
}

.container:after {
  content: " ";
  display: block;
  flex: 1;
}

.left,
.center {
  border: 1px solid #0F0;
  flex: 1;
  text-align: center;
}

<div class="container">
  <div class="left">
    I'm left aligned
  </div>
  <div class="center">
    I'm center aligned
  </div>
</div>