html，css, js如何让一个行内元素如span中的字体添加时从中间向两边延伸？？

<span class="content" style="font-size: 191.045px;"> <span class="before">泪水</span> <span class="blank">优艾设计网_Photoshop问答;_</span> <span class="after">你的胸膛</span> </span>

由于需要适配字体大小，故html结构要这样嵌套，都是行内元素。单击下面答案的时候，就会改变class为blank的span的文本值。可以看到文本是从左至右延伸的，这样会导致右边的文本溢出。我想让文本是从中间向两边延伸的，需要怎么做呢？

---

webspy 优艾设计网_在线设计 12小时前

外加一层div，css文字居中

---

微笑等待晴天181853505 优艾设计网_PS论坛 11小时前

外层为块级元素，再加上text-align: center;。

---