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

2024年5月11日CSS

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;
}

是非、お試しください。