Contact Form 7 × Turnstile 中央揃えトラブルの原因と解決法

1. 状況

• Contact Form 7 のフォームに [cf7-simple-turnstile] を追加
• Turnstile を中央に表示したい
• 普通に margin: 0 auto を付けても中央にならない

2. 原因

1. [cf7-simple-turnstile] が生成する Turnstile は <div class=”cf-turnstile”>
   • 画面に表示されるのはこの <div>
   • <input type=”hidden”> は非表示なので無関係
2. テーマや CF7 の CSS が干渉
   • 既存の float や text-align が優先され、普通の中央揃えが効かない

3. 解決法

.cf7 .cf-turnstile {
  display: block !important;   /* ブロック化 */
  margin: 1.5em auto !important; /* 左右中央揃え + 上下余白 */
  text-align: center !important; /* 念のため */
}

• これで [cf7-simple-turnstile] を入れたフォームの Turnstile が中央揃えされる
• <input type=”hidden”> は無視してOK

4. ポイントまとめ

• ショートコードが生成する .cf-turnstile に CSS を当てる
• 非表示の hidden input は操作不要
• テーマや CF7 の干渉が強い場合は !important で上書き