在调整浏览器大小时，防止子元素移动到父元素外部？

Question

我有一个带有徽标的按钮。通常看起来像这样：

[ Logo Centered Text ]

按钮有text-align: center，徽标位于相对位置，始终位于按钮的左侧。但是，当按钮的尺寸因浏览器尺寸的变化而减小时，由于其定位，徽标会从按钮的左侧掠过：

Lo[go Centered Text ]

如何使徽标保持在按钮的左侧，无论按钮的大小如何？

.button {
  text-align: center
}

.logo {
  position: relative;
  right: 125px;
}

这是一个演示该问题的小提琴：https://jsfiddle.net/83vfft19/

Answer 1

如果将父.button位置设置为relative，则应该能够将子.logo绝对定位在父级中。