根据最宽的元素，对多个垂直元素设置相同的宽度

Question

我有一个包含多个元素的容器，这些元素的最小宽度和左右两侧都有一些填充，问题是需要将它们居中并放在一列中，每个元素都放在单独的行中，每个元素的内容不同，导致元素具有不同的宽度，例如

+--------- container ---------+
|child1 is too long|
|child2|
|child3 is long|
|child4|
+-----------------------------+

如何使它们都具有最大元素的宽度，同时保持最大宽度，即，如果内容太长，则在保持宽度的同时分解为下一行。

下面是屏幕截图，上面是当前情况，下面是预期结果

Answer 1

您可以使用display:inline-block元素
包装项目 并将该元素包装在text-align:center元素中，以使其居中：

.centered{ text-align:center; }

.wrapper{ 
  display: inline-block; 
  font: 24px Arial; 
  text-align: left;
}

.wrapper > div{
  border: 2px dashed pink;
  margin-bottom: 4px;
}

<div class='centered'>
  <div class='wrapper'>
    <div contenteditable>try typing here</div>
    <div contenteditable>aaaaa</div>
    <div contenteditable>aaaaa aaaaa</div>
    <div contenteditable>aa</div>
    <div contenteditable>aaaaaaaaa</div>
  </div>
</div>

内部子元素是block级元素（<div>），这意味着它们将占据其父元素的整个宽度，其中父元素是inline-block。这将导致父母与孩子最大一样宽。