css : margin autoが指定できない

Question

###実現したいこと
margin:0 auto;を指定して、表示したい画像などをページの中央にバランス良く表示させたい

###発生している問題・エラーメッセージ
margin:0 auto;が指定できません
反映されず、ずっと左に寄ったままです。。

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

<div id="colum-btn">
         <a class="on">show all</a>
         <a class="select" href=#>ブログ</a>
         <a class="select" href=#>プログラミングTips</a>
       </div>
       
        <div id="colum-item-wrapper">
       <div class="colum-item">
         <img src ='https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/practice/portfolio/programmer.jpg'>
         <a href=#>プログラミングで広がる可能性</a>
         <p>コラム</p>
       </div>
       <div class="colum-item">
         <img src='https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/practice/portfolio/html5.jpg'>
         <a href=#>HTML5の新タグについて</a>
         <p>HTML</p>
       </div>
       <div class="colum-item">
         <img src='https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/practice/portfolio/js.jpg'>
         <a href=#>Javascriptの文法まとめ</a>
         <p>Javascript</p>
       </div>
       <div class="colum-item">
         <img src='https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/practice/portfolio/books.jpg'>
         <a href=#>プログラミングに挫折しそうになったら読むべき10冊</a>
         <p>コラム</p>
       </div>
       <div class="colum-item">
         <img src='https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/practice/portfolio/engineer.jpg'>
         <a href=#>これから求められるエンジニア人材とは</a>
         <p>コラム</p>
       </div>
       <div class="colum-item">
         <img src='https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/practice/portfolio/inspect.jpg'>
         <a href=#>要素の検証をしてみよう</a>
         <p>HTML / CSS</p>
       </div>
       </div>
       
       <div class="colum-btn-load">
       <a href=#>Load More</a>
       </div>
     </div>
   </div>

###試したこと

#colum{
  background-color:#f4f4f4;
}

.colum-title h1{
  font-size:32px;
  font-weight:normal;
  color:#555;
  text-align:center;
}

.colum-title{
  padding-top:80px;
  padding-bottom:20px;
}

#colum-btn .on{
  display:inline-block;/*inline-blockにしないと１行すべてがブロックとして指定されるので注意*/
  font-size:16px;
  color:white;
  font-weight:bold;
  padding:8px 16px;
  background-color:#009ca8;
}

#colum-btn .select{
  display:inline-block;
  font-size:16px;
  color:#444;
  font-weight:bold;
  padding:8px 16px;
  background-color:white;
  margin-left:5px;
  transition:color 0.3s,background-color 0.3s;
}

#colum-btn .select:hover{
  background-color:#009ca8;
  color:white;
}

#colum-btn{
  text-align:center;
  margin-bottom:40px;
}

.colum-item{
  background-color:white;
  padding:7px 7px 27px 7px;
  width:40%;
  float:left;
   margin-left:30px;
   margin-bottom:30px;
}

.colum-item img{
  display:block;
  max-width:100%;/*画像が親要素からはみ出さないようにする*/
}

#colum-item-wrapper{
  margin:0 auto; ←ここ！！！/*うまく反映されない(>-<)*/
}

.colum-btn-load{
  clear:both;
  text-align:center;
}

###[イメージ画像]
##
右側の画像表示の上部分が今制作している部分です
「プログラミングで広がる可能性・・・」というcolum-itemをブラウザの中央表示にしたいのですが、うまくいきません。。。
完成イメージは右下の部分です。

###floatの補足
#colum-item-wrapperの子要素.colum-itemなのですがfloatしているので、#colum-item-wrapperにclear処理が必要でした。
ですが、それでもなお margin:auto が指定できません。
margin以外でも良いので中央表示にする方法を教えてください。

Answer 1

他の方の回答にもあるように width を指定しないと margin: auto は無効になります。

今回はインナーブロックの widthが % で指定してあるので、ラッパーの widthを % で指定して、インナーブロックの widthと marginの % も調整するとうまくいくと思います。

サンプル
https://jsfiddle.net/4uh34zax/

---

補足追記

ちなみに、containerクラスに幅指定がすでにされています。

.container {
width: 1170px;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}

サイズは固定なのですね。

colum-item-wrapper は container の子要素になってますか。
間に別の要素があるならそれも width margin: auto を指定する必用があります。

あと、.colum-item の幅が 40% で指定してあるので、40% + 40% で 100% にならないので、その分左よりになります。余白等含めて 100% になるように指定するか、px などの固定サイズで指定して中央にくるように調整してください。

Comments

[kotori_00]

回答ありがとうございます。
とてもわかりやすく為になりました。

Answer 2

width を指定する必要があると思います。以下のようにしてみたらどうなりますか？

#colum-item-wrapper{
  margin:0 auto;
  width:800px;
}

Comments

[kotori_00]

回答ありがとうございます。
それも試してみたのですがうまくいきませんでした。
何が原因なのか不明です。。
margin以外で中央表示にする方法はないでしょうか。

[退会済みユーザー]

あなたのコードをそのまま貼り付けて試してみましたが width:800px; を追加してその div 要素が中央に表示されましたが？　ブラウザのキャッシュにある訂正前のものを見ていませんか？

[kotori_00]

何度も更新しているのですが、どうしてもうまく表示されません。
他指定を変更して、それは反映されているのでパソコンなどに不具合が起きているのは考えられないのですが。。

ちなみに、containerクラスに幅指定がすでにされています。

.container {
width: 1170px;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}

このコードでmarginがうまく表示されない原因はありますでしょうか。

[退会済みユーザー]

私の回答をちゃんと見てもらってますか？　margin:auto; を指定する div 要素の width を指定するのですよ。

[kotori_00]

#colum-item-wrapper{
margin:0 auto;
width:800px;
}

ということですよね？
pxにしても%にしてもうまくいきませんでした。。

[退会済みユーザー]

うまくいかないとのことなので、うまくいく証拠を見せてあげます。下の画像を見てください。

http://surferonwww.info/BlogEngine/image.axd?picture=2016%2f10%2fmarginauto.jpg

IE9 + F12 開発者ツールのものです。html と CSS のソースは質問者さんが質問に提示したものをそのままコピペし、#colum-item-wrapper を私の回答の通り書き換えただけです。

F12 開発者ツールのスタイルに表示されている width: 800px; のチェックを外すと左に寄ってしまうという質問者さんの問題が再現できます。

ソースをいじらなくても F12 開発者ツール上で width の 200px を 80% とかに書き換えられますので、それも試してみましたが、同じ効果（センタリングはされる）が得られます。

質問者さんの環境でうまく行かないのは、質問に書いてない部分が影響しているのでは？

質問者さんの方でも F12 開発者ツールを使ってどのようにスタイルが適用されているか見てください。

[kotori_00]

いろいろと詳しく教えていただきありがとうございます。
サイトにアクセスし拝見させていただきました。
確かにちゃんと表示されています。
もう一度自分のコードを確認してみようと思います。

Answer 3

左に寄ったままがわからなかったのですが、おそらくこれかなっと。
ほんっとにはじめてのHTML5とCSS3：【11-2】marginの auto という値の「？」を解決しておこう

Comments

[kotori_00]

回答ありがとうございます。
リンクの内容を読みましたが、違うようです。
画像を追加表示したので、宜しくお願いします。