WordPressのプラグイン「ContactForm7」の要素を中央寄せしたい

Question

###前提・実現したいこと
WordPressのプラグイン「ContactForm7」で作成したフォーム画面の
入力項目を中央寄せしたい。

###発生している問題・エラーメッセージ
いろいろな要素に"text-align: center;""margin: 0 auto;"を指定したが、実現しない。

###該当のソースコード
■ショートコード
[contact-form-7 id="39" title="コンタクトフォーム"]

■ページ上で右クリック＞ソースの表示 で該当部分のHTML

<p><label> お名前 (必須)<br />
    <span class="wpcf7-form-control-wrap your-name"><input type="text" name="your-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" /></span> </label></p>
<p><label> メールアドレス (必須)<br />
    <span class="wpcf7-form-control-wrap your-email"><input type="email" name="your-email" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email" aria-required="true" aria-invalid="false" /></span> </label></p>
<p><label> 題名<br />
    <span class="wpcf7-form-control-wrap your-subject"><input type="text" name="your-subject" value="" size="40" class="wpcf7-form-control wpcf7-text" aria-invalid="false" /></span> </label></p>
<p><label> メッセージ本文<br />
    <span class="wpcf7-form-control-wrap your-message"><textarea name="your-message" cols="40" rows="10" class="wpcf7-form-control wpcf7-textarea" aria-invalid="false"></textarea></span> </label></p>
<p><input type="submit" value="送信" class="wpcf7-form-control wpcf7-submit" /></p>

###試したこと

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の設定を行えば、入力フィールドの左右中央寄せができますでしょうか。
ご教授お願いいたします。

Answer 1

text-align: center;は、中央揃えしたい要素ではなく、その親要素に指定する必要があります。

p要素にtext-align: center;を指定しましょう。
提示のコードにはないですが、親要素のformに.wpcf7-formというクラスが与えられているはずです。

.wpcf7-form p {
  text-align: center;
}

また、ソースコードはコードブロックで囲むようにしましょう（<code>というボタンを押せばコードブロックを挿入できます）

---

【追記】
入力フォームのみ中央寄せ

.wpcf7-form-control-wrap {
  display: block;
  text-align: center;
}

Comments

[ringomilk]

ご回答ありがとうございます。
教えていただいた方法で、無事中央寄せすることができました。
しかし、入力ボックスのみを中央寄せしたかったのですが、「お名前」等の項目名も中央に寄ってしまいました。
こちらを回避する方法はございますでしょうか？
重ねての質問になってしまい、申し訳ございません。
ご存知でしたら、ご教授いただければ幸いです。

また、コードをタグで囲う方法を教えていただきありがとうございます！
早速やってみました。見やすいですね。以後はこのようにいたします。

[退会済みユーザー]

inputの親要素spanをblock要素にしてtext-align: center;を指定するとかですかね。
回答に追記しました。

[ringomilk]

なるほど！
希望通りのレイアウトにすることができました。
大変わかりやすいご回答、ありがとうございました。