スマホの画面にした時に図を中央寄せにしたいのですが、できません。
margin: 0 auto; や text-align: centerも試してみました。
portfolioの2、4、6の部分だけ縦並び(ブロック要素)で中央寄せにしたいです。
普通のパソコン画面ではインラインブロックで、3つずつ横並びの設定になっています。
こちらがHTMLで
HTML
1 <div all-portfolio> 2 <div class="top-portfolio"> 3 <div class="portfolio1 box1"></div> 4 <div class="portfolio2 box1"></div> 5 <div class="portfolio3 box1"></div> 6 </div> 7 <div class="tail-portfolio"> 8 <div class="portfolio4 box2"></div> 9 <div class="portfolio5 box2"></div> 10 <div class="portfolio6 box2"></div> 11 </div> 12 </div>
こちらが通常のCSSで
CSS
1.top-portfolio { 2 width: 920px; 3 margin: 0 auto; 4 padding-bottom: 10px; 5 font-size: 0; 6} 7 8.tail-portfolio { 9 width: 920px; 10 padding-bottom: 90px; 11 margin: 0 auto; 12 font-size: 0; 13} 14 15.box1 { 16 width: 300px; 17 height: 250px; 18 display: inline-block; 19} 20 21.box2 { 22 width: 300px; 23 height: 250px; 24 display: inline-block; 25 padding-bottom: 90px; 26} 27 28.portfolio1 { 29 background-image: url(img/sketch.jpg); 30 background-size: cover; 31} 32 33.portfolio2 { 34 background-image: url(img/ccc.png); 35 background-size: cover; 36 background-position: center; 37 margin-right: 10px; 38 margin-left: 10px; 39} 40 41.portfolio3 { 42 background-image: url(img/write.jpg); 43 background-size: cover; 44} 45 46.portfolio4 { 47 background-image: url(img/aaa.png); 48 background-size: cover; 49 background-position: center; 50} 51 52.portfolio5 { 53 background-image: url(img/talk.jpg); 54 background-size: cover; 55 margin-right: 10px; 56 margin-left: 10px; 57} 58 59.portfolio6 { 60 background-image: url(img/bbb.png); 61 background-size: cover; 62 background-position: center; 63}
こちらがメディアクエリのCSSとなっております。
CSS
1 .portfolio1 { 2 display: none; 3 } 4 .portfolio3 { 5 display: none; 6 } 7 .portfolio5 { 8 display: none; 9 } 10 .portfolio2 { 11 display: block; 12 } 13 .portfolio4 { 14 display: block; 15 } 16 .portfolio6 { 17 display: block; 18 }
回答1件
あなたの回答
tips
プレビュー