没有递归地居中所有子元素的居中元素？答案

【问题标题】：Center elemement without centering all chidren recursively?没有递归地居中所有子元素的居中元素？
【发布时间】：2021-02-16 06:35:42
【问题描述】：

我希望在一个元素中将所有子元素居中，而不是让所有子元素居中。

<Col style={{ textAlign: "center" }}>
  <Space>...</Space>
  <div>...</div>
</Col>

在这个例子中，我使用的是 antd。图书馆应该无关紧要。我希望添加 Space 和 div 元素的中心，但不添加任何 Space 或 div 元素。使用 textAlign 会将包含在其范围内的每个元素居中，这不是我想要的。

【问题讨论】：

标签： javascript reactjs typescript antd

【解决方案1】：

Flexbox 就是解决方案。对于水平居中，使用justify-content:

Colu { 
    display: flex; 
    justify-content: center;
    /*           or: space-evenly */
}

Colu, Space, div { 
    border: 1px solid;
    padding: 5px;
}

Space, div { 
    display: inline-block;
    width: 100px; 
}

<Colu>
  <Space>abc</Space>
  <div>def</div>
</Colu>

请注意，我必须在此演示中更改 Col，因为 Col 是一个现有的 HTML 元素，它只能出现在 table 元素内的 colgroup 中，并且不能包含内容。

【讨论】：

【解决方案2】：

使用 display flex 使第一个孩子居中：

{
display:flex;
justify-content:center;
align-items:center
}

【讨论】：

【解决方案3】：

你可以通过flex实现

{display: 'flex',alignItems: 'center',flexDirection: 'column'}

HTML+CSS 示例

#demo{
  display:flex;
  align-items:center;
  flex-direction:column;
}

<div id="demo">
  <span style="width:100px;background:green;">
   <p>2nd child</p>
  </span>
  <button>first<button>
<div>

【讨论】：