PHPで入力フォームを中央寄せで表示したい

Question

いつもお世話になっております。

PHPにて検索キーワードを入力するフォームを作成して、CSSで中央寄せを試みたのですがうまくいきません。
以下に現状のソースを載せます。

<form method="post" action="">
  <div id = "search">
  <br>
    <input id="search_field" type="text" placeholder="例) xxxx name="s" class="search_field" value="" style="color: black; border-color:#009245;"/>
  </div>
</form>

input.search_field {
	width : 700px;
	text-align: center;
}

CSSの方で「text-align: center;」を指定することで入力フォームが中央寄せされると思ったのですが、placeholderの文字列「例） xxxx」だけが中央寄せされてしまいました。

可能であれば、placeholderにて指定している文字列は左寄せで入力フォームだけを中央寄せしたいのですが、何かうまいやり方はないでしょうか。

恐れ入りますが、ご教授お願い致します。

Answer 1

マージンの中央よせをform要素にかけるのが良いかなと思います。

form {
  margin: 0 auto;
  width : 700px;
}
input.search_field {
  width: 100%;
}

Comments

[kszk311]

あと、ソースはcodeブロックで囲んでおいてください
https://teratail.com/help#about-markdown

[science_mac]

返信遅れて申し訳ありません。
ご教授の内容で実装ができました。
ありがとうございました。

またソースの書き方について大変失礼しました...
次回からcodeブロックで囲むようにします。
こちらについてもご教授ありがとうございました。

[kszk311]

あ、あと今回の内容はPHP関係ないので、PHPのタグは外しておくことをお勧めします。
＞次回からcodeブロックで囲むようにします。
質問内容は編集できますよ！

[science_mac]

そうでした！
色々とありがとうございます！
修正しておきました。