section class="gridWrapper"に属するbox達を中央に揃えたいのですがmarginもdisplay:inlineも効かなくて困っています
教えていただけたら嬉しいです。よろしくお願いします。
html
1<div class="wrapper"> 2 <section id="main"> 3 4 <section class="gridWrapper"> 5 <article class="grid"> 6 <div class="box"> 7 <h3><a href="surgery.html">外科</a></h3> 8 </div> 9 </article> 10 11 <article class="grid"> 12 <div class="box"> 13 <h3><a href="internal.html">内科</a></h3> 14 </div> 15 </article> 16 17 <article class="grid"> 18 <div class="box"> 19 <h3><a href="digestive.html">消化器外科</a></h3> 20 </div> 21 </article> 22 23 <article class="grid"> 24 <div class="box"> 25 <h3><a href="orthopedics.html">整形外科・リハビリテーション科</a></h3> 26 </div> 27 </article> 28 29 <article class="grid"> 30 <div class="box"> 31 <h3><a href="plasticsurgery.html">形成外科</a></h3> 32 </div> 33 </article> 34 35 <article class="grid"> 36 <div class="box"> 37 <h3><a href="urology.html">泌尿器科</a></h3> 38 </div> 39 </article> 40 41 <article class="grid"> 42 <div class="box"> 43 <h3><a href="dermatology.html">皮膚科</a></h3> 44 </div> 45 </article> 46 47 <article class="grid"> 48 <div class="box"> 49 <h3><a href="neurology.html">神経内科</a></h3> 50 </div> 51 </article> 52 53 <article class="grid"> 54 <div class="box"> 55 <h3><a href="pediatrics.html">小児科</a></h3> 56 </div> 57 </article> 58 59 <article class="grid"> 60 <div class="box"> 61 <h3><a href="neurosurgery.html">脳神経外科</a></h3> 62 </div> 63 </article> 64 65 <article class="grid"> 66 <div class="box"> 67 <h3><a href="dentistry.html">歯科</a></h3> 68 </div> 69 </article> 70 71 <article class="grid"> 72 <div class="box"> 73 <h3><a href="otolaryngology.html">耳鼻咽喉科</a></h3> 74 </div> 75 </article> 76 77 <article class="grid"> 78 <div class="box"> 79 <h3><a href="outpatient.html">専門外来</a></h3> 80 </div> 81 </article> 82 83 <article class="grid"> 84 <div class="box"> 85 <h3><a href="infectious.html">感染症外来</a></h3> 86 </div> 87 </article> 88 89 <article class="grid"> 90 <div class="box"> 91 <h3><a href="medicalcheckup.html">健康診断・人間ドック</a></h3> 92 </div> 93 </article> 94 </section> 95 </section> 96 </class> 97</div>
css
1#header,#wrapper,.inner{ 2 width:960px; 3 padding:0; 4 margin:0 auto; 5} 6 7 #wrapper{ 8 padding-bottom:20px; 9 margin-left: auto; 10 margin-right: auto; 11} 12 13.gridWrapper{ 14 padding-bottom:40px; 15 overflow: hidden; 16 margin: auto; 17 display: inline-block; 18} 19 20.grid{ 21 float:left; 22 border-radius:5px; 23 background:#fff; 24} 25 26.box{ 27 width: 230px; 28 height: 60px; 29 margin:0 5px; 30 padding:10px; 31 border:1px solid #f1f1f1; 32 padding: 0.5em 1em; 33 margin: 1em 0; 34 background: #f4f4f4; 35 border-left: solid 6px #acd16b; 36 box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.33); 37}
提示されたコードのみではむしろ左に寄っているので、もっと外側から書いてくれないと再現できません。
どこを直せば良いでしょうか?
再現可能なコードを提示してください。提示コードのみを書いてブラウザで開けばわかるのでは?
ご指摘があった通り記述を追加していたところ、親要素のmainがcss内に記述されてない事に気付きました。そこでmainにwidthとmarginを記述してみましたが動きません。
<class ="wrapper">と書かれていますが、誤記かと思うので見直してみてください
class id="wrapper"とご指摘がありました。それを直しても未だ中央に寄っていません、、
ええと、問題の再現をしたいだけなので、中央によるわけではありませんよ?
とにかく、<class ...>というのは誤りのはずなので(class要素はない)、もう一度見直してみてください
すみません初心者なもので、(class要素はない)という表現が理解できないのですが、もう少し教えていただけませんか?
<class ...>と本当に書いていたとしたら間違いだということですが、いずれにせよ、左が空くという現象は見られません。もっと外側から記述する必要があるのでは?
なぜか修正しようとしている?みたいですが、問題の再現のために実際のコードをそのまま提示してくれたらいいので(公開してはいけないところは○などにして)、再現するコードをお願いします。
https://34.gigafile.nu/1113-d2f457bbee3c941d927a05ddd42326894 1000万文字以上になってしまうのギガファイル便を使わせて頂きます。ダウンロードパスワードは8989です。
回答5件
あなたの回答
tips
プレビュー