HTML CSS、ボタンの文字を真ん中に表示したい

HTML、CSSについてわからないところがあります。
入力画面に戻るボタンの文字が下に沈んでしまいます。
ボタンの真ん中に文字がくるようにしたいです。
ご教示ください。

php:
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
2"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3<html xm1ns="http://www.w3.org/1999/xhtml">
4<html lang="ja">
5<head>
6<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
7<meta http-equiv="Content-Script-Type" content="text/javascript">
8
9
10<title>Contact</title>
11<style type="text/css">
12<!--
13html,body {
14scrollbar-arrow-color:#ffccff;
15scrollbar-face-color:#ffcccc;
16scrollbar-3dlight-color:#ffffff;
17scrollbar-darkshadow-color:#ffcccc;
18scrollbar-highlight-color:#ff9999;
19scrollbar-shadow-color:#ff9999;
20scrollbar-track-color:#ffffff;
21}
22-->
23body{
24	font-family: あずきフォント;
25}
26p#submit_btn {
27	text-align: center;
28}
29.fontButton{
30	text-align: center;
31
32}
33.content {
34	margin-left: 137px;
35	margin-top: 0px;
36	font-size: 95%;
37	font-weight: bold;
38	font-family: あずきフォント;
39 	color: #6c2735;
40}
41
42.form {
43	color: white;
44	background-color: #f7c2c2;
45	text-align: center;
46	/* 	padding-left: 370px; */
47	padding-top: 5px;
48	padding-bottom: 5px;
49	font-weight: bold;
50	font-size: 95%;
51	width: 825px;
52	font-family: あずきフォント;
53}
54
55.textform {
56	margin-left: 68px;
57	font-family: あずきフォント;
58}
59
60.textform_postalCode {
61	margin-left: 30px;
62	font-family: あずきフォント;
63}
64
65.textstyle{
66	font-size: 95%;
67	font-weight: bold;
68	font-family: あずきフォント;
69 	color: #6c2735;
70/* 	font-family: "あずきフォント",  sans-serif; */
71}
72.required {
73	font-size: 87%;
74	font-weight: normal;
75	color: red;
76	font-family: あずきフォント;
77}
78#heading{
79	border-left: 10px solid black;
80	border-bottom: medium solid black;;
81/* 	font-family: "あずきフォント",  sans-serif; */
82	font-family: あずきフォント;
83 	color: #6c2735;
84}
85/* 送信ボタン */
86
87button[type="button"] {
88 padding: 10px 20px;
89 border: none;
90/*  background: #9FD6D2; */
91 background: #f7c2c2;
92 color: #fff;
93 font-family: あずきフォント;
94 text-align: center;
95}
96
97
98
99/* 送信ボタン - マウスオーバー時 */
100
101button[type="button"]:hover {
102/*  background: #54A9BD; */
103 background: #ff9b9f;
104 font-family: あずきフォント;
105 text-align: center;
106}
107
108/* 送信ボタン - 押せないとき */
109button[type="button"][disabled] {
110 background-color: #ccc;
111 cursor: default;
112 font-family: あずきフォント;
113 text-align: center;
114}
115/*検索ボタン*/
116button[type="button"] {
117	background: #f7c2c2;
118	color: white;
119	/*   width: 55px; */
120	height: 30px;
121	border: 0;
122	line-height: 30px;
123	font-family: "あずきフォント";
124	text-align: center;
125}
126
127button[type="button"]:hover {
128	background: #ff9b9f;
129	height: 30px;
130	color: #fff;
131	border: 0;
132	cursor: pointer;
133	font-family: "あずきフォント";
134	text-align: center;
135}
136
137button[type="button"].disabled {
138	background: #f7c2c2;
139	cursor: default;
140	text-align: center;
141}
142
143button[type="button"].disabled:hover {
144	background: #f7c2c2;
145	font-family: "あずきフォント";
146	text-align: center;
147}
148@font-face {
149font-family: あずきフォント;
150src: url(azuki.ttf) format("truetype");
151}
152
153</style>
154</head>
155<body bgcolor="#f2dae8">
156	<h1 id="heading">
157		<font color="black">お問い合わせ</font>
158	</h1>
159	<p class="form">送信完了</p>
160	<p class="textstyle">
161
162	<p>
163		<button type="button" class="fontButton" onclick="location.href='contact.php'">入力画面に戻る</button>
164	</p>
165
166</body>
167</html>

kei344

2017/02/15 02:11

質問文のコードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

marimokomokmOk

2017/02/15 02:40

承知しました＾＾

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

回答3件

解決はしていますが、気になった点を指摘します。
0. HTMLの開始タグが2個ある
まとめれば良いです。<html xm1ns="http://www.w3.org/1999/xhtml" lang="ja">
0. bodyのbgcolor属性は現在は使用しないことになっています
CSSで body{background-color:#f2dae8;} と指定してください。
0. 「入力画面に戻る」は a要素で普通にリンクにすればよいのでは

HTML
1<!-- 
2<button type="button" class="fontButton" onclick="location.href='contact.php'">入力画面に戻る</button>
3↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ -->
4<a href="contact.php" class="fontButton">入力画面に戻る</a>

また、HTML4の書き方なので、参考にされておられる本／サイトが古い可能性があります。

投稿2017/02/15 02:51

kei344

総合スコア69398

ベストアンサー

CSS
1button[type="button"] {
2padding: 0px;
3}

投稿2017/02/15 01:49

Lhankor_Mhy

総合スコア36074

既に回答されている方がいらっしゃいますが、
ファイルの89行目の

css
1padding: 10px 20px;

これを↓

css
1padding: 0;

としてやると添付イメージ画像の様になりますよ。

投稿2017/02/15 02:45

YuichiKataoka

総合スコア216

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

HTML CSS、ボタンの文字を真ん中に表示したい

関連した質問