質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.42%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Q&A

解決済

1回答

621閲覧

flexを設定しているのに,justify-content: center;が効かない原因がわからないです。

yura-asuha

総合スコア13

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

0グッド

0クリップ

投稿2023/03/12 12:56

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}

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

css

1@media screen and (min-width:768px){ 2 .aida1{ 3 padding: 32px 24px; 4 background-color: rgba(0,121,242,0.05); 5 display: flex; 6 flex-direction: row; 7 justify-items: center; 8 } 9 10}

ここで justify-content ではなく justify-items プロパティを指定しているのは意図的でしょうか。

投稿2023/03/12 13:03

arcxor

総合スコア2857

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yura-asuha

2023/03/12 13:11

早速のご回答ありがとうございました。 なんてことだ・・・ ほんとだ・・・ ごめんなさい。 なぜ、そこが違っているのに、見えてなかったのか自分でも不思議です。 わたしの見落としです。 ご指摘ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.42%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問