Css 将一个柔性项目居中，并将第二个项目向右对齐任意数量的px

所以我试着精确地将一个flex（除非有人有其他想法）项目居中，并将第二个项目对齐，例如将20px对准我的第一个项目的右侧。我的代码：

<div className="d-flex justify-content-center border">
  <h1 className="title">Tacos</h1>
  <div className="icon"></div>
</div>

玉米饼

这就是结果

---

正如你们所见，它们都居中，我的目标是把文本“玉米卷”放在正中央，然后把我的图标像20px一样对齐到右边。有办法吗？

您可以使用宽度：0；空白：nowrap技巧

.flex{
显示器：flex；
证明内容：中心；
}
.图标{
宽度：0；
空白：nowrap；
左边距：20px；
}

玉米饼
您可以使用
宽度：0；空白：nowrap技巧


.flex{
显示器：flex；
证明内容：中心；
}
.图标{
宽度：0；
空白：nowrap；
左边距：20px；
}

玉米饼
谢谢，这是可行的，但如果有边距，它会使文本稍微向左，所以我在文本上使用了左右填充，现在就可以了：）谢谢，这是可行的，但是如果有边距，它会使文本稍微向左，所以我在文本上使用了左右填充，现在就可以了：）