Anki卡片模板HTML/CSS垂直对齐配置需求咨询

之前用<br>手动排版确实会在不同分辨率下失效，咱们改用Flexbox布局来实现规范的响应式垂直排版，这是目前适配各种窗口大小的最优方案。

正面模板（HTML + CSS） #

<!-- 正面HTML结构 -->
<div class="front-container">
  <div class="jp-char">日本語</div>
  <div class="hint">点击显示答案</div>
</div>

<!-- 样式部分，放在Anki模板的样式区域 -->
<style>
/* 让卡片容器占满整个可用高度，避免内容被截断 */
.card {
  height: 100vh;
  margin: 0;
  padding: 1rem;
  box-sizing: border-box;
}

.front-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  align-items: center; /* 让所有内容水平居中 */
}

.jp-char {
  font-size: 4rem;
  /* 自动占据中间空间，实现垂直居中，适配任何窗口高度 */
  margin: auto 0;
}

.hint {
  font-size: 1.2rem;
  color: #666;
  /* 把提示语固定在容器底部 */
  margin-top: auto;
}
</style>

核心逻辑： #

• 给.card设置height: 100vh让卡片占满视口高度，box-sizing: border-box避免内边距撑开容器导致布局混乱。
• .front-container用垂直方向的Flex布局，通过margin: auto 0让日语字符自动居中，margin-top: auto把提示语牢牢固定在底部，彻底替代手动加<br>的临时方案。

背面模板（HTML + CSS） #

针对笔画图置顶、其余内容有序排列的需求，同样用Flexbox实现响应式布局：

<!-- 背面HTML结构 -->
<div class="back-container">
  <img src="{{StrokeImage}}" class="stroke-img" alt="日语笔画图">
  <div class="jp-char-back">{{JapaneseText}}</div>
  <div class="keywords">关键词：{{Keywords}}</div>
  <div class="mnemonic">助记：{{MnemonicContent}}</div>
</div>

<!-- 样式追加到之前的<style>中 -->
<style>
/* 保留之前的.card样式 */
.back-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 1.5rem; /* 统一控制元素间距，比手动换行更整洁 */
  padding: 1rem;
}

.stroke-img {
  width: 100%;
  max-width: 300px; /* 限制图片最大宽度，避免拉伸变形 */
  align-self: center; /* 让图片水平居中 */
  /* Flex布局默认第一个元素置顶，无需额外设置 */
}

.jp-char-back {
  font-size: 3.5rem;
  text-align: center;
}

.keywords {
  font-size: 1.3rem;
  font-weight: bold;
}

.mnemonic {
  font-size: 1.1rem;
  line-height: 1.6;
}
</style>

核心逻辑： #

• .back-container用垂直Flex布局，gap属性统一管理元素间的间距，适配不同内容长度。
• 笔画图作为第一个子元素自然置顶，配合align-self: center保证水平居中；其余内容按HTML顺序自动排列，你可以根据需求调整字体、颜色等样式。

这样修改后，不管窗口分辨率怎么变化，布局都能自动适配，再也不用反复调整<br>的数量啦！

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