input type="test"　常に表示位置を中央にしたい。

コード


ここに質問の内容を詳しく書いてください。
画面のサイズが変わっても input[type="text"] の表示位置が常に、画面の中央になるようにしたいです。
■■な機能を実装中に以下のエラーメッセージが発生しました。

### 発生している問題・エラーメッセージ

中央になりません


### 該当のソースコード

```ここに言語名を入力
【html】

<head>
		<title>模写</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0", 
         maximum-scale=1.0, minimum-scale=1.0>
		<link rel="stylesheet" href="style.css">
		<link rel="stylesheet" href="responsive.css">
</head>
					
			<div class="A">どのくらい収入が見込めるかチェック</div>
			
			<input type="text" name="name" placeholder="ロケーション"><br>
			<select name="address" class="B">

【css】

input[type="text"]{                 /*ロケーション*/
	
	height:50px;
	margin-top:5px;
	padding-left:5px;
	border-radius:5px;
	border:solid 1px #0000aa;
	display:inline-block;
}

【responsive.css】

@media(max-width:680px){
	input[type="text"],
	select[name="address"]{
		width:75%;
		
	}
}

試したこと

position:center; margin-right:auto; margin-left:auto;

補足情報（FW/ツールのバージョンなど）

css3 html5 サブライムテキスト３

H40831

2020/01/09 21:40 編集

1. HTML/CSSの勉強はどこでされましたか？ 2. 模写の対象にそのページを選んだ理由はなんですか？ 3. teratailをどうやって知りましたか？

m.ts10806

2020/01/09 23:29

type="test" になってますよ、タイトル。あと、コードはマークダウンのcode機能を利用して(ファイル毎にブロックをわけて)ご提示ください。また、現在の現象確認できる画面キャプチャと「こうしたい」画面イメージをご提示ください。

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

回答1件

ベストアンサー

input[type="text"]だけが中央にくればいいのなら、下記でいいですが。

css
1input[type="text"]{ /*ロケーション*/
2  height:50px;
3  margin:5px Auto 0;
4  padding-left:5px;
5  border-radius:5px;
6  border:solid 1px #0000aa;
7  display:block;
8}

たぶん、標題部分や select も一緒に中央にしたいですよね。
また、レスポンシブ対応にしたいですよね。
一例として下記のような感じてどうでしょうか。

html
1<div class="center">
2  <div class="A">どのくらい収入が見込めるかチェック</div>
3  <input type="text" name="name" placeholder="ロケーション">
4  <select name="address" class="B">
5</div>

css
1.center {
2  margin:0 Auto;
3  max-width: 510px; 
4}
5input[type="text"], select[name="address"]{
6  height:50px;
7  width: 100%;
8  margin-top:5px;
9  padding-left:5px;
10  border-radius:5px;
11  border:solid 1px #0000aa;
12}
13/*responsive.css*/
14@media(max-width:680px){
15  .center {
16    margin:0 Auto;
17    width: 75%; 
18  }
19  input[type="text"],
20  select[name="address"]{
21    width:100%;
22  }
23}