CSS-设置内联元素的文本对齐

我有导航点，里面有文字（长和短）。文本应该居中，但文本本身是左对齐的；解释起来很复杂。请看一下我的照片：

上面三个是我的状态，但下面三个应该是状态

使用

display:inline

my元素具有正确的大小（即使使用分词）。因此，我给了父级

text align:center

使文本容器水平居中但：容器中的文本应具有

文本对齐：左

。但是使用

display:inline

这是不可能的

顺便说一句：

display:inline block

不是解决方案，因为它会将包含较长文本的容器拉伸到100%宽度，即使断开的文本不适合

请看这里：

---

有没有一种不使用JavaScript的方法来解决这个问题？

将

text align:left

放在

nav#上，使用内联a>span>span>{/code>。请看这里：但我希望文本容器居中。