【Contact Form 7】スマホで送信ボタンが中央に寄らない！スピナーが原因のズレをCSSで強制的に直す方法

2025年12月10日2025年12月11日

WordPressのお問い合わせフォームプラグイン「Contact Form 7」を使っていると、「パソコンでは綺麗に表示されているのに、スマホで見ると送信ボタンが左にズレている」という現象に悩まされることがあります。

text-align: center; を指定しても効かない
親要素の p タグをいじると他の項目まで崩れてしまう……。

そんな「泥沼」ハマってしまった方向けに、今回は「CSSで物理的にボタンを中央に配置する」という、最終手段にして確実な解決策をご紹介します。

原因：犯人は「読み込み中アイコン（スピナー）」

そもそも、なぜ送信ボタンは左にズレてしまうのでしょうか？

原因の多くは、送信ボタンの横に隠れている**ローディングアニメーション（スピナー）**です。

HTML上では以下のような記述になっています。

HTML

<span class="wpcf7-spinner"></span>

このスピナーは、送信中にクルクル回るアイコンを表示するためのものですが、これが「幅」を持っているため、「送信ボタン＋スピナー」のセットで配置され、ボタン単体が左に追いやられてしまうのです。

解決策：スピナーを消して、計算式で中央に置く

親要素（<p>タグなど）のCSS干渉が激しい場合、親を修正するのは骨が折れます。

そこで今回は、以下の2ステップで解決します。

スピナーを非表示にする（レイアウト崩れの元を断つ）
ボタンの位置を計算式（calc）で指定する（親要素に関係なく中央に置く）

コピペ用CSSコード

以下のコードを「外観 > カスタマイズ > 追加CSS」に貼り付けてください。

※ 204px の部分は、ご自身のサイトのボタンの幅に合わせて書き換えてください。

CSS

/* 1. レイアウト崩れの原因になるスピナーを非表示にする */
.wpcf7-spinner {
    display: none !important;
}

/* 2. スマホ画面（768px以下）限定の調整 */
@media screen and (max-width: 768px) {
    /* 送信ボタン本体を直接指定 */
    .wpcf7-form-control.wpcf7-submit.has-spinner {
        margin: 0;
        position: relative;
        top: 0;
        
        /* ここがポイント！計算式で強制的に中央へ */
        /* calc((画面幅100% - ボタンの幅) ÷ 2) */
        left: calc((100% - 204px) / 2);
    }
}