点击切换div序列时首次图片居中异常及flex方向不生效的问题排查

嘿，我来帮你拆解下这俩头疼的问题，刚好之前做类似视觉小说切换效果的时候踩过几乎一样的坑～

一、先揪出核心问题根源 #

1. CSS选择器写错了！这是最致命的

你CSS里写的verses { ... }是标签选择器，但HTML里的容器是<div id="verses">，正确的选择器应该是#verses（id选择器）。之前这段容器的flex布局完全没生效，导致子元素的宽度、居中逻辑全部混乱，这就是首次加载图片居中异常的主要原因。

2. JS强制把verse设为block，直接废掉了flex布局

你的每个verse原本是flex纵向布局，但JS里把要显示的verse设为display: block，直接覆盖了CSS里的flex配置——flex布局的属性（比如flex-direction: column）只有在display: flex时才会生效，设成block自然就变成默认的横向排列了。

3. 样式冗余导致维护混乱

你的.verse1和.verse2样式完全重复，不仅写起来麻烦，还容易出现配置不一致的问题，建议合并成统一的.verse类。

二、修正后的完整代码（含跳转逻辑优化） #

我把你的代码做了精简和修复，同时适配了你“最后一步点击跳转站内页面”的需求：

HTML部分

<div id="verses">
  <div class="verse verse1">
    <div class="storygraphic"></div>
    <div class="storytextbox">
      <ul>
        <li>text1</li>
        <li>text2</li>
      </ul>
    </div>
  </div>
  <div class="verse verse2" style="display: none">
    <div class="storygraphic"></div>
    <div class="storytextbox">
      <ul>
        <li>TEXT3</li>
        <li>TEXT4</li>
      </ul>
    </div>
  </div>
  <!-- 后续可以直接添加verse3、verse4，不需要改CSS/JS -->
</div>

CSS部分

body {
  background: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh; /* 用视口高度替代固定值，适配不同屏幕 */
  margin: 0; /* 去掉浏览器默认边距 */
}

ul {
  list-style-position: outside;
  list-style-type: "* ";
  margin-left: 20px;
  width: 100%;
  color: white;
}

/* 修正为id选择器，容器布局终于能生效了！ */
#verses {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 1000px;
  margin: auto;
}

/* 统一所有verse的样式，减少冗余 */
.verse {
  display: flex;
  background-color: black;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100px;
  width: 100%;
  image-rendering: pixelated;
  gap: 0;
}

.storygraphic {
  background-image: url("https://file.garden/ZqzaaX6Iv3i3b03H/revamp/nmnsprite.PNG");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  min-height: 500px;
  width: 80%;
  image-rendering: pixelated;
}

.storytextbox {
  font-family: UTDRmono;
  color: white;
  width: 700px;
  border: solid white 4px;
  padding: 15px;
  background-color: black;
  min-height: 70px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

JS部分（优化切换+跳转逻辑）

// 精准选择所有verse元素
const verses = document.querySelectorAll("#verses .verse");
let count = 0;

// 页面加载时先显示第一个verse
verses[count].style.display = 'flex';

// 绑定点击事件
document.addEventListener('click', myFunction);

function myFunction() {
  // 先隐藏所有verse
  verses.forEach(el => el.style.display = "none");

  count++;
  if (count < verses.length) {
    // 显示当前步骤的verse
    verses[count].style.display = 'flex';
  } else {
    // 最后一步点击后跳转站内页面，替换成你的目标路径
    window.location.href = '/your-target-page.html';
    // 如果想改成循环切换，就注释上面的跳转，打开下面两行：
    // count = 0;
    // verses[count].style.display = 'flex';
  }
}

三、问题解决的关键点总结 #

1. 修正#verses的CSS选择器后，容器的1000px宽度和居中约束终于能生效，图片的居中逻辑自然正常了；
2. JS里把显示方式从block改成flex，让CSS里的flex-direction: column重新生效，不会再变成横向排列；
3. 合并重复的verse样式，后续添加新步骤只需要复制HTML结构，不用改CSS/JS，维护起来方便很多。

内容来源于stack exchange