margin:0 auto;が効かず、中央に寄りません

こんにちは！
h1とformだけのシンプルな構造なのですが、中央寄せができず苦労しています。

html
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="utf-8">
5    <title></title>
6    <style>
7      .conteinar{
8        width: 1000px;
9        margin: 0 auto;
10      }
11      h1{
12        width: 300px;
13        margin: 0 auto;
14      }
15      form{
16        width: 300px;
17        margin: 30px auto;
18      }
19      .text{
20        width: 216px;
21        margin: 0 auto;
22      }
23      .submit{
24        width: 96px;
25        margin: 20px auto;
26        padding: 5px 34px;
27      }
28    </style>
29  </head>
30  <body>
31        <div class="conteinar">
32      <h1>タイトルタイトル</h1>
33      <form class="" action="check.php" method="post">
34        <input class="text" type="text" name="name">
35        <br>
36        <input class="submit" type="submit" value="送信">
37      </form>
38    </div>
39  </body>
40</html>
41

h1
input type="text"
input type="submit"

この3つの要素を以下のようにセンタリングしたいです。

しかし、現状では

input type="text"
input type="submit"

この2つがformタグの中で左寄せになってしまっています。

widthやmargin,paddingの数値はなんでもいいのですが、とにかくh1とformの中身のtextやsubmitなどの要素を全てセンタリングするには、どうすればいいでしょうか？

ちなみに現状のcodepenはこちらです。検証にお使いください。
左に寄った状態のcodepen

お手数ですが、原因がわかる方がいらっしゃいましたら教えてください。どうぞよろしくお願いいたします。

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

回答2件

ベストアンサー

とにかくh1とformの中身のtextやsubmitなどの要素を全てセンタリングするには、どうすればいいでしょうか？

textやsubmit（inputタグ）はインライン要素なので、text-align: center;が有効。また、これは子孫に継承するので親要素に設定すればOK。

css
1.conteinar{
2  max-width: 1000px;
3  margin: 0 auto;
4  text-align: center; /*追加*/
5}

なるべくシンプルにするなら下記でいいでしょう。
formタグはブロック要素なのでwidthを設定しなければ幅は親全体に広がります。その中のインライン要素は中央寄せになります。

css
1.conteinar{
2  max-width: 1000px;
3  margin: 0 auto;
4 text-align: center;
5}
6.text{
7  width: 216px;
8}
9.submit{
10  width: 96px;
11  margin: 20px 0;
12  padding: 5px 34px;
13}

formやh1にwidthを設定する必要があるなら、margin: 0 auto;でセンタリングしてください。

あと、蛇足ですか、レスポンシブ対応を意識するなら、width: 1000px;と固定せずに、max-width: 1000px;と最大幅を設定するのがいいでしょう。

投稿2020/03/29 03:21

編集2020/03/29 04:11

hatena19

総合スコア33699

bariko

2020/03/29 03:40

ありがとうございます！text-align: center;が子孫へ継承する、という点は初めて知り、大変参考になりました。ただ、.conteinarにtext-align: center;を追加するだけだと、formタグに指定した300pxの枠内で中央寄せになるだけで、formタグのボックスそのものは画面の左端に張り付いてしまいました。そこで、formタグだけdivで囲って、そのdivへ margin: 0 auto width: 300px; をしたところ、目標の画像通りに出来上がりました。目標の画像のように、画面上で綺麗にh1,text入力窓,submitボタンを中央に寄せた見た目にするのにはこれしか方法がないでしょうか？

bariko

2020/03/29 04:18

追加でお答え頂きありがとうございました！大変勉強になりました。

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

CSS
1      form{
2        text-align: center;/* ADD */
3      }

投稿2020/03/29 03:12

kei344

総合スコア69400

kei344

2020/03/29 03:13

margin: 0 auto; は display: block; の要素に効きます。

bariko

2020/03/29 03:24 編集

回答ありがとうございます。formタグはブロック要素ではないんですね。ただ、 form{ text-align: center;/* ADD */ } をするだけではディスプレイの左に全体が寄って、その中で中央寄せになってしまいました。そこで、formをdivで囲って、そのdivにmargin: 0 auto;をしたところ、目標の形になりました。これ以外に、方法ってないのでしょうか？

kei344

2020/03/29 03:30

> formタグ input要素のことであればそう書きましょう。 form要素はdisplay: block;が初期値です。（一般的なブラウザの場合） > ディスプレイの左に全体が寄って h1要素に幅があり、幅より文字が少ないため左にあるだけでは。（h1要素は中央にあるが中身が左寄せになっているだけ）デベロッパーツールで状況を確認しましょう。【初心者向け！Chromeの検証機能（デベロッパーツール）の使い方】 https://saruwakakun.com/html-css/basic/chrome-dev-tool 【ChromeデベロッパーツールでCSSをチェックする方法 | なんでものびるWEB】 https://nandemo-nobiru.com/2944/

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

あなたの回答