共计 307 个字符,预计需要花费 1 分钟才能阅读完成。
<span style="display: inline-block;width: 50px;>
<p style="display: inline-block;white-space: nowrap;margin-left: 50%;transform: translateX(-50%);">
黄浦哇哈哈乐百氏 777 哇哈哈很好的呀区
</p>
</span>
要点:
1. 子元素要设置不换行,并且是个内联块级元素,这样文本就领有了理论宽度。
2. 基于父元素 50% 宽度向右平移,将基准点定位在父元素中心点,即 margin-left: 50%。
3. 基于文本本身的宽度向左偏移一半的文本长度,即 transform: translateX(-50%)。
正文完