使用inline CSS实现父Div内子Div水平居中并排的问题求助

直接用Flex布局就能快速实现需求，完全用内联CSS编写，代码示例如下：

<div style="display: flex; justify-content: center; gap: 10px; /* 可选：设置子元素间距 */">
  <div style="width: 100px; height: 100px; background-color: #ccc;">子Div1</div>
  <div style="width: 100px; height: 100px; background-color: #ddd;">子Div2</div>
  <div style="width: 100px; height: 100px; background-color: #eee;">子Div3</div>
</div>

关键逻辑说明： #

• 父Div设置display: flex：开启弹性布局，让子元素默认横向排列
• justify-content: center：让子元素在水平方向上居中对齐
• 子Div无需额外设置display属性，flex布局会自动处理它们的排列

如果不想用Flex，也可以用传统的行内块方式：

<div style="text-align: center;">
  <div style="display: inline-block; width: 100px; height: 100px; background-color: #ccc;">子Div1</div>
  <div style="display: inline-block; width: 100px; height: 100px; background-color: #ddd;">子Div2</div>
  <div style="display: inline-block; width: 100px; height: 100px; background-color: #eee;">子Div3</div>
</div>

这种方式的要点： #

• 父Div设置text-align: center：让行内元素水平居中
• 每个子Div设置display: inline-block：把块级元素转为行内块，允许横向排列

内容的提问来源于stack exchange，提问作者meeth