Contact Form 7の送信ボタンを中央寄せにする方法

※当サイトは、Google Adsense、Amazonアソシエイト、各種アフィリエイト広告を利用しています。また、製品PRを行っている場合があります。

Contact Form 7を使っていると
色々と細かい調整が必要になるときがあります。

使用しているWordpressのテーマによって
レイアウトが崩れる場合もありますので。

今回は送信ボタンを中央寄せにする方法を解説します。

まず、送信ボタンのコードの前後を下記のようにdivで挟んであげます。

<!-- 送信ボタン -->
<div class="abc">
[submit "送信"]
</div>

そして、CSSを下記のように設定します。

.abc {
text-align: center;
}

そして、結果を確認いただくと
中央に寄ったは良いが微妙にずれていることに気が付きます。

ソースを見てみると「wpcf7-spinner」が入ってることに気が付きます。

なので、下記CSSで非表示にしてあげると
綺麗に中央に寄ります。

div.wpcf7 .wpcf7-spinner{
display:none!important;
}

是非、お試しください。

\応援ありがとうございます🌿/
各種ブログランキングに参加しています✨

アバター画像

Hiro先生

おかげさまで豊かさに満たされた日々を
今、素敵に生きています
感謝の種まきによって人生が根底から変わることを知って
素敵なご縁の輪を広げながら、
望む未来を叶える、奇跡を起こし続けるお手伝いをしています。

記事本文: 352