WordPress / Contact Form 7で「プライバシーポリシー」のテキストだけ下に下がる問題と解決法

1. 問題の状況

Contact Form 7で以下のようなHTMLがあったとします。

<p class="syoudaku">
  [acceptance acceptance-442 class:spam1]
  <a href="https://example.com/privacy-policy" target="_blank">プライバシーポリシー</a>の内容を確認し、同意しました
</p>

• Flexで中央揃え（display: flex; align-items: center; justify-content: center;）にしても、 「プライバシーポリシー」のリンクだけ下に下がる
• チェックボックスと文章が縦にずれてしまう

2. 原因

• <a> タグの後ろにあるテキストノード（「の内容を確認し、同意しました」）は 単独のインラインテキスト として扱われる
• CSSの flex は 直接の子要素 にしか作用するため、
  • 子要素は <a> タグだけ
  • その隣のテキストノードは別扱い → 結果として縦が揃わず、下に下がって見える

3. 解決策

テキストノードも <span> でラップして1つの要素にする

こうすることで、Flexの子要素として扱われ、縦中央が揃うようになる。

修正版HTML

<p class="syoudaku">
  <span class="syoudaku__check">[acceptance acceptance-442 class:spam1]</span>
  <span class="syoudaku__text">
    <a href="https://example.com/privacy-policy" target="_blank">プライバシーポリシー</a>の内容を確認し、同意しました
  </span>
</p>

修正版CSS

.syoudaku {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px; /* チェックと文章の間隔 */
  margin: 20px 0;
  font-size: 13px;
  line-height: 1.5;
}

.syoudaku__check {
  display: inline-flex;
  align-items: center;
}

.syoudaku__text {
  display: inline-flex;
  align-items: center;
}

.syoudaku__text a {
  font-weight: bold;
  text-decoration: underline;
}

ポイントまとめ

1. Flexは子要素にしか作用しない
2. テキストノードだけでは縦揃えできない → <span> でラップする
3. チェックボックスとリンク付きテキストをまとめることで、横並び＋縦中央揃えが安定する
4. CF7の [acceptance] ショートコードも、Flexの子要素として扱うと調整がしやすい

---

💡 復習メモ

解決の鍵は すべてのテキストを要素で囲むこと

「Flex中央揃えなのに下に下がる」のはほぼ インラインテキストが原因