如何将文本排列为单行并实现水平居中对齐

你现有代码无法实现需求的核心原因有5个：

• 父容器.text2固定宽度仅200px，远小于内容实际宽度，直接限制单行展示
• 使用已废弃的<center>标签实现居中，不符合HTML规范
• 动效切换的.word元素设置了固定600px宽度+绝对定位，未做位置偏移，导致内容错位
• 自定义<p2>属于无效HTML标签，浏览器无法按预期解析布局属性
• 拆分后的字母元素设置了左浮动，容易引发排列错位

具体修改代码 #

JS逻辑无需调整 #

你原来写的文字翻转动效逻辑可以直接复用，不需要改动。

CSS样式替换 #

将原有CSS代码替换为以下内容：

@font-face {
  font-family: Quicksand-Medium;
  src: local('Quicksand Medium'), local('Quicksand-Medium');
}
.text2 {
  font-family: Quicksand-Medium, sans-serif;
  font-weight: 600;
  position: absolute;
  width: 100%;
  height: 40px;
  top: 30%;
  margin-top: -20px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 25px;
  z-index: 100;
  padding: 50px 0;
}
.text2 .content-wrap {
  display: inline-block;
  position: relative;
  vertical-align: top;
  margin: 0;
}
.word {
  font-family: Quicksand-Medium, sans-serif;
  font-weight: 600;
  position: absolute;
  width: auto;
  left: 100%;
  top: 0;
  white-space: nowrap;
  opacity: 0;
  margin-left: 8px;
}
.letter {
  display: inline-block;
  position: relative;
  transform: translateZ(25px);
  transform-origin: 50% 50% 25px;
}
.letter.out {
  transform: rotateX(90deg);
  transition: transform 0.32s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.letter.behind {
  transform: rotateX(-90deg);
}
.letter.in {
  transform: rotateX(0deg);
  transition: transform 0.38s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.wisteria { color: #8e44ad; }
.belize { color: #2980b9; }
.pomegranate { color: #c0392b; }
.green { color: #16a085; }
.midnight { color: #2c3e50; }

HTML结构替换 #

将原有HTML结构替换为以下内容，移除废弃标签和无效自定义标签：

<div class="text2">
  <div class="content-wrap">Mes siūlome
    <span class="word wisteria">pastovų darbą.</span>
    <span class="word belize">laiku mokamą atlyginimą.</span>
    <span class="word pomegranate">socialines garantijas.</span>
    <span class="word green">galimybes tobulėti.</span>
    <span class="word midnight">nuolaidas tinklo parduotuvėse.</span>
  </div>
</div>

修改说明 #

• 父容器.text2宽度设为100%，通过flex布局实现整行内容的水平居中，适配所有屏幕宽度
• 所有动效切换的.word元素统一固定在前缀文字“Mes siūlome”的右侧，叠放在同一位置，切换时不会出现位移、换行问题
• 移除字母元素的左浮动属性，避免字符拆分后排列错乱
• 通过white-space: nowrap强制所有文本单行展示，不会因宽度问题自动折行
• 移除废弃的<center>标签和无效的<p2>自定义标签，符合HTML规范，无浏览器兼容问题

内容的提问来源于stack exchange，提问作者Tom Brand