HTMLで中央寄せが効かない時の原因

CSSで文字を中央寄せしようと思い、margin: 0 auto;にして中央寄せにしようとしてみたのですが縦の値は変更したりして、反映されてるのは確認できたのですが、横のautoがなぜか値が‐になって反映されません。
タグによって横のmarginが反映されないのか、autoではそもそもできないのかが判断が出来ません・・・

原因を教えていただけると助かります・・・

<!DOCTYPE html>
<html>
    
    <head>
        <meta charset="utf-8">
        <title>Creative Cooperation</title>
        <style type="text/css">
            h1{
                margin: 40px auto;
                padding-top: 30px;
                clear: both; 
                font-size: 60px;
            }
            h2{
                margin-top: 40px;
            }
            .header{
                background-color: gainsboro;
                color: white;
            }
            .header-logo{
                font-size: 30px;
            }
            .main{
                width: 100%;
            }
            .catch{
                font-size: 50px;
                margin: 0 auto;
            }
            .header-contents{
                float: right;
            }
            .catch{
                width: 100%;
                margin: 0 auto;
            }
            .bottom{
                padding: 5px 10px;
                width: 40px;
                margin: 40px auto;
                font-size: 20px;
                background-color: coral;
                
            }
        </style>
    </head>
    <body>
        <div class="header">
            <div class="header-logo">Creative Cooperation</div>
            </div>
        <div class="main">
            <h1>あなたの「作りたい」を後押しする</h1>
            <a class="catch">足りないを、補える仲間を作りませんか？</a>
            <h2>本サイトでは、クリエイターのもっと作りたいを後押しするために</h2>
            <h2>スキルマッチングを行っております。</h2>
            <div class="bottom">登録</div>
        </div>
        <div class="fotter">
        </div>
    
    </body>
</html>

yoshinavi

2019/01/22 09:50

問題のあるHTMLとCSSのコードを提示されると回答がつきやすくなると思います。また、HTMLも関連しますので、質問タグにもHTMLを追加してください。

azuapricot

2019/01/22 11:07

文字ならインライン要素の可能性もあるので、 text-align:center;などで中央による場合もありますが、なんともいえないのでコードを提示してください。コードはマークダウン <code> を使用して提示してください。

退会済みユーザー

2019/01/22 12:05

ありがとうございます、コード追加記載しましたのでアドバイスいただけると助かります。

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

回答3件

ベストアンサー

html
1<html>
2  <head>
3    <meta charset="utf-8">
4    <title>Creative Cooperation</title>
5  </head>
6  <body>
7    <div class="header">
8        <div class="header-logo">Creative Cooperation
9        </div>
10    </div>
11
12    <div class="main">
13        <div class="inline">
14            <h1>あなたの「作りたい」を後押しする</h1>
15            <a class="catch">足りないを、補える仲間を作りませんか？</a>
16            <h2>本サイトでは、クリエイターのもっと作りたいを後押しするために</h2>
17            <h2>スキルマッチングを行っております。</h2>
18        </div>
19        <div class="bottom">登録
20        </div>
21     </div>
22     
23    <div class="fotter">
24    </div>
25
26  </body>
27</html>

css
1
2.inline { /*中央寄せするために追加したCSS*/
3  width:100%;
4  display:inline-block;
5  text-align:center;
6}
7

inline というCSSを一つ追加しました。
中央寄せしたい要素をdivで囲って、
・width:100%;
・display:inline-block;
・text-align:center;

を追加すると簡単に中央寄せできます。
お試しください。

投稿2019/01/22 12:37

azuapricot

総合スコア2341

退会済みユーザー

2019/01/22 12:57

ありがとうございます！試してみます！！

azuapricot

2019/01/22 14:26

伝え忘れてましたが、CSSを実装していくにあたって・インライン要素・ブロックレベル要素この２つが重要になってきます。これを理解できると、各段にコーディングしやすくなります。あとは色々なCSSのサンプルがのっているおすすめのサイトも貼っておくのでよければ参考にしてください。 http://www-creators.com/css-prop/filter

退会済みユーザー

2019/01/28 01:34

ご丁寧にありがとうございます・・・参考にしてみます！

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