質問: ### 前提・実現したいこと WordPressのプラグイン「ContactForm7」で作成したフォーム画面の 入力項目を中央寄せしたい。 ### 発生している問題・エラーメッセージ いろいろな要素に"text-align: center;""margin: 0 auto;"を指定したが、実現しない。 ### 該当のソースコード ■ショートコード [contact-form-7 id="39" title="コンタクトフォーム"] ■ページ上で右クリック>ソースの表示 で該当部分のHTML ``` お名前 (必須) メールアドレス (必須) 題名 メッセージ本文 ``` ### 試したこと ``` input.wpcf7-form-control.wpcf7-text, textarea.wpcf7-form-control.wpcf7-textarea{ width: 90%; }←これは効きます input.wpcf7-form-control.wpcf7-text, textarea.wpcf7-form-control.wpcf7-textarea{ margin: 0 auto; text-align: center; }←ダメです input.wpcf7-form-control wpcf7-text wpcf7-validates-as-required { margin: 0 auto; text-align: center; }←ダメです ``` どのようにCSSの設定を行えば、入力フィールドの左右中央寄せができますでしょうか。 ご教授お願いいたします。
回答: `text-align: center;`は、中央揃えしたい要素ではなく、**その親要素に指定する必要があります。** `p`要素に`text-align: center;`を指定しましょう。 提示のコードにはないですが、親要素の`form`に`.wpcf7-form`というクラスが与えられているはずです。 ``` .wpcf7-form p { text-align: center; } ``` また、ソースコードはコードブロックで囲むようにしましょう(``というボタンを押せばコードブロックを挿入できます) 【追記】 入力フォームのみ中央寄せ ``` .wpcf7-form-control-wrap { display: block; text-align: center; } ```