formのsubmitの中央揃えについて

html
1<!DOCTYPE html>
2<html>
3	<head>
4	<meta charset="utf-8">
5	<link rel="stylesheet" type="text/css" href="hogehoge.css">
6	<title></title>
7	</head>
8	<body>
9		<div id="wrapper">
10			<h1>hogehoge</h1>
11			<form action="" method="post">
12				text
13				<input type="text" name="name" id="name" value="">
14				text
15				<input type="text" name="ruby" id="ruby" value="">
16				text
17				<input type="text" name="address1" value="">
18				text
19				<input type="text" name="address2" value="">
20				text
21				<input type="text" name="address3" value="">
22				text
23				<input type="text" name="address3" value="">
24				text
25				<input type="email" name="mail" value="">
26				text
27				<input type="email" name="mail2" value="">
28				text
29				<textarea name="inquiry">
30				</textarea>
31				<input id="submit_button" type="submit" name="submit" value="text">
32			</form>
33			<footer>
34				<span>Copyright hogehoge</span>
35			</footer>
36	</body>
37</html>

css
1@charset "UTF-8";
2
3body{
4}
5
6#wrapper{
7	max-width: 1000px;
8	margin: 0 auto;
9	padding: 0;
10}
11
12#wrapper h1{
13	text-align: center;
14	padding: 20px;
15}
16
17form{
18	max-width: 290px;
19	margin: 0 auto;
20}
21
22
23input{
24	width: 260px;
25	border-radius: 10px;
26	padding: 10px;
27	margin-bottom: 5px;
28}
29
30select{
31	width: 282px;
32	border-radius: 10px;
33	padding: 10px;
34	margin-bottom: 5px;
35}
36
37textarea{
38	width: 279px;
39	height: 100px;
40	border-radius: 10px;
41}
42
43input#submit_button{
44	width: 40%;
45	margin: 10px;
46	text-align: center;
47}
48
49footer{
50	height: 15px;
51	text-align: center;
52	font-size: 0.6em;
53	padding: 4% 0;
54}

上記の画像の一番下のピンク丸囲みsubmitボタンを中央寄せしたいのですが、できずに困っています。

inputはインライン要素ということでtext-align: center;で中央寄せしましたが反映できません。
cssは不慣れでid名のつけ方や使い方がうまくいかないだけかもしれませんが、
アドバイスいただけないでしょうか。

ブラウザ；firefox
PC；win7 home

行動規範の内容に同意します

回答3件

CSS
1input#submit_button{
2    width: 40%;
3    margin: 10px auto;
4}
5

これでどうでしょう。

投稿2016/10/13 01:07

hibikikudo

総合スコア238

yoshipu

2016/10/13 02:46

すみません。うまくいきませんでした。お答えいただけたそのお気持ちに大変感謝しております。

行動規範の内容に同意します

ベストアンサー

inputはインライン要素ということでtext-align: center;で中央寄せしましたが反映できません。
CSS
1input#submit_button{
2    width: 40%;
3    margin: 10px;
4    text-align: center;
5}

text-align: center; は中央寄せしたい要素ではなく、その外側の要素（ブロック要素）で指定します。現在のコードの場合 form要素が外側の要素に当たりますが、「text」も中央寄せされるため、marguttaさんの書かれているように適当な div要素で囲うなどすると良いと思います。

HTML
1<div class="input_wrap"><input id="submit_button" type="submit" name="submit" value="text"></div>

CSS
1.input_wrap {
2    text-align: center;
3}
4```**動くサンプル：**[https://jsfiddle.net/1vw5ttmf/](https://jsfiddle.net/1vw5ttmf/)
5
6【text-align - CSS | MDN】
7[https://developer.mozilla.org/ja/docs/Web/CSS/text-align](https://developer.mozilla.org/ja/docs/Web/CSS/text-align)

投稿2016/10/13 02:24

kei344

総合スコア69400

yoshipu

2016/10/13 03:08

わかりやすい解説ありがとうございます。解説ページもすごく助かりました。ブックマークしました。私が最初にやっていたことはinput submit内を中央ぞろえしてしまっていて、本来は、input submitの外側のボックス内で中央ぞろえを指定するとよかったんだと理解しました。 google先生に聞いても聞き方が悪くて誤った解釈をしてしまいました。本当にありがとうございます。

行動規範の内容に同意します

html

css