CSS - 如果有足够的空间，则为中心元素

Question

我在菜单栏上工作，其中心设计有徽标/徽章。这在当前情况下可以正常工作（带有少量项目的桌面），但如果屏幕缩放或菜单选项数量增加，则徽标会放在菜单按钮后面。

我目前使其更加强大的方法是（完全按字面意思）通过缩放徽标/徽章并将其移出菜单栏上方来回避问题。

但理想情况下，我会将其保留在中间位置。菜单栏，菜单选项之间。有人知道如何做到这一点？最好只使用CSS。

澄清：我希望明星居中到较大屏幕上的菜单栏，然后撞到剩余空间的中间在较小的屏幕上。因此，仅使用flexbox不是一个（完整的）解决方案。对于固定内容，我可以使用断点，但内容可能会发生变化，无法预测所需的断点。