如何在容器内定位两个子元素，其中第一个子元素位于中央，另一个位于一侧

Question

我想要制作一个按钮组件（在 React 中），以便它将其 content 集中放置，同时允许指定 left 或 right 图标。 内容必须位于与父级相关的中心，并且尊重每个图标（可选）（如果提供）。

我面临的问题是，我不确定确保内容到达图标时可以重叠在下一行的最佳方法。

下面是我想要实现的目标的几张图片

我试图通过 transform:translateX 对两个元素使用绝对定位来调整内容的位置，但如果内容占据完整空间或比预期长，则它不起作用。另外，尝试使用 Flexbox，但它不允许在不考虑图标的情况下相对于父元素对齐单个元素。在左侧或右侧设置填充（取决于图标的宽度）似乎也不起作用，因为它会移动内容并破坏中心对齐

非常感谢我可以尝试使其发挥作用的任何建议或指导。尽量避免使用任何“hacky”基于 Javascript 的解决方案，在这种解决方案中我必须计算每个容器🙏

Answer 1

您可以创建自定义 CSS 网格类

.custom-btn {
  display: grid;
  padding: 5px;
  align-items: center;
  grid-template-columns: 1fr 40px;
}

<button class="custom-btn">
 <span>Text Content</span>
 <span>Icon</span>
</button>

<button class="custom-btn">
 <span>iedowedoiwfohwiuwriufwriufhwrufnhwriofnwroirfnwrfiwrf </span>
 <span>Icon</span>
</button>