3つのボックス(親-子-孫)にflexを設定して、1つ目のボックスのitemをjustify-content: center;を設定したのですが、中央寄せになってくれなくて、悩んでいます。
原因を教えていただければ、幸いです。
ネットに記載されている原因の可能性を調べてみたのですが、該当しておらず・・・
margin:auto;を設定していないです。
::after ::beforeは設定していないです。
flex設定忘れないです。
html
1<section class="aida1"> 2 <div class="aida1-container1"> 3 <div class="aida1-container2"> 4 <div class="aida1-item1"> 5 <img src="./images/final-exam-assets/campaign/frame_left.png" class="aida1-imgl"> 6 <div class="aida-item11"> 7 <p class="aida-item11-p1">2021年度</p> 8 <p class="aida-item11-p2">オンライン</p> 9 <p class="aida-item11-p3">教室ランキング</p> 10 <p class="aida-item11-p4"><span class="sp1">No.</span><span class="sp2">1</span><span class="sp3">※1</span></p> 11 </div> 12 <img src="./images/final-exam-assets/campaign/frame_right.png" class="aida1-imgr"> 13 </div> 14 <div class="aida1-item2"> 15 <img src="./images/final-exam-assets/campaign/frame_left.png"> 16 <div class="aida-item11"> 17 <p class="aida-item11-p1">2021年度</p> 18 <p class="aida-item11-p2">オンライン</p> 19 <p class="aida-item11-p3">習い事ランキング</p> 20 <p class="aida-item11-p42"><span class="sp12">No.</span><span class="sp22">1</span><span class="sp32">※1</span></p> 21 </div> 22 <img src="./images/final-exam-assets/campaign/frame_right.png"> 23 </div> 24 </div> 25 <p class="aida1-text1">※1 2021年度15歳以上を対象としたインターネット調査</p> 26 </div> 27 <div> 28 <div class="aida1-text2"><span class="aida1-text2-span1"></span><span class="aida1-text2-span2">期間限定</span><span class="aida1-text2-span3"></span></div> 29 <div class="aida1-link"> 30 <a href="#" class="aida1-ham-fed-item6">初月0円キャンペーン<i class="bi bi-arrow-right-short"></i></a> 31 </div> 32 </div> 33 </section>
css
1.aida1{ 2 padding: 32px 24px; 3 background-color: rgba(0,121,242,0.05); 4 display: flex; 5 flex-direction: column; 6} 7 8.aida1-container1{ 9 display: flex; 10 flex-direction: column; 11 justify-content: center; 12} 13 14.aida1-container2{ 15 display: flex; 16 column-gap: 2px; 17 justify-content: center; 18} 19 20.aida1-item1{ 21 display: flex; 22 justify-content: center; 23 width: 326px; 24 height: 112px; 25 margin-left: -7px; 26} 27 28.aida1-item2{ 29 display: flex; 30 justify-content: center; 31 width: 326px; 32 height: 112px; 33 margin-left: 7px; 34} 35 36.aida-item11{ 37 position: relative; 38 display: flex; 39 flex-direction: column; 40 align-items: center; 41 margin-right: -1px; 42} 43 44.aida-item11-p1{ 45 font-size: 12px; 46 font-weight: bold; 47 color: #555555; 48 padding-top: 3px; 49 padding-right: 1px; 50} 51 52.aida-item11-p2,.aida-item11-p3{ 53 font-size: 13px; 54 font-weight: bold; 55 padding-bottom: 2px; 56 padding-top: 2px; 57} 58 59.aida-item11-p4{ 60 position: absolute; 61 top:59px; 62 left:3px; 63 height: 59.82px; 64 width: 86px; 65} 66 67.aida-item11-p42{ 68 position: absolute; 69 top:59px; 70 left:9px; 71 height: 59.82px; 72 width: 86px; 73} 74 75.sp1,.sp2,.sp12,.sp22{ 76 display: inline-block; 77 color: #f26618; 78 padding-right: 0px; 79 margin-top: -2px; 80 font-size: 32px; 81 font-family: Poppins; 82 font-style: italic; 83 font-weight: 800; 84} 85 86.sp12,.sp22{ 87 color: #f2a118; 88} 89 90.sp2,.sp22{ 91 font-size: 39px; 92} 93 94.sp3,.sp32{ 95 color: #666666; 96 font-size: 10px; 97} 98 99.aida1-text1{ 100 font-size: 12px; 101 text-align: center; 102 margin-top: 11px; 103 margin-bottom: 21px; 104} 105 106.aida1-text2 span{ 107 display: inline-block; 108} 109 110.aida1-text2-span1{ 111 width: 30px; 112 height: 2px; 113 margin-bottom: 7px; 114 background-color: #f11f8d; 115 transform: rotate(60deg); 116} 117 118.aida1-text2-span3{ 119 width: 30px; 120 height: 2px; 121 margin-bottom: 7px; 122 margin-left: 1px; 123 background-color: #f11f8d; 124 transform: rotate(-60deg); 125} 126 127.aida1-text2{ 128 font-size: 20px; 129 font-weight: bold; 130 text-align: center; 131 margin-bottom: 8px; 132} 133 134@media screen and (min-width:768px){ 135 .aida1{ 136 padding: 32px 24px; 137 background-color: rgba(0,121,242,0.05); 138 display: flex; 139 flex-direction: row; 140 justify-items: center; 141 } 142 143}
回答1件
あなたの回答
tips
プレビュー
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。
また依頼した内容が修正された場合は、修正依頼を取り消すようにしましょう。
2023/03/12 13:11