前提・実現したいこと
HTMLとCSSであるサイトを作っているのですがFlexBoxを使っていると以下のような問題が起きました。
発生している問題
以下の画像のように作っています。
黒枠がページ幅、オレンジ色がdiv、緑色がh4、青枠がFlexコンテナ、紫がFlexアイテムとなっています。
この構造を"Margin: 0 auto"で中央寄せしたいのですができませんでした。
デベロッパーツールを使ってみてみると
青色をFlexBoxを使って横並びにした場合、Flexコンテナが画面幅いっぱいに取られていました。
この構造を画面の中央寄せする方法ってありませんか?
以下がコードになります。
HTML
1 <div class="hosting-learn-media1127"> 2 <div class="hosting-items"> 3 <h4><strong>ヘッダー4</strong></h4> 4 <div class="flexbox-media1127-2"> 5 <div class="hosting-item"> 6 <div class="hosting-image1"></div> 7 <div class="hosting-sentence"> 8 <p class="hosting-heading"><strong>準備1</strong></p> 9 <p class="hosting-paragraph">テキスト1</p> 10 </div> 11 </div> 12 <div class="hosting-item"> 13 <div class="hosting-image2"></div> 14 <div class="hosting-sentence"> 15 <p class="hosting-heading"><strong>準備2</strong></p> 16 <p class="hosting-paragraph">テキスト2</p> 17 </div> 18 </div> 19 <div class="hosting-item"> 20 <div class="hosting-image3"></div> 21 <div class="hosting-sentence"> 22 <p class="hosting-heading"><strong>準備3</strong></p> 23 <p class="hosting-paragraph">テキスト3</p> 24 </div> 25 </div> 26 </div> 27 </div> 28 </div> 29 </div>
CSS
1 .flexbox-media1127-2 { 2 display: flex; 3 } 4 5 .hosting-learn-media1127 { 6 display: block; 7 width: 100%; 8 margin-bottom: 5rem; 9 } 10 11 .hosting-items { 12 display: block; 13 width: 100%; 14 padding: 0 24px; 15 margin: 0 auto; 16 } 17 18 .hosting-item { 19 width: 12.75rem; 20 margin-right: 1rem; 21 } 22 23 .hosting-sentence { 24 border-right: solid 1px rgba(120,120,120,0.4); 25 border-bottom: solid 1px rgba(120,120,120,0.4); 26 border-left: solid 1px rgba(120,120,120,0.4); 27 } 28 29 .hosting-image1, .hosting-image2, .hosting-image3 { 30 width: 100%; 31 height: 6.55rem; 32 background-size: cover !important; 33 } 34 35 .hosting-heading, .hosting-paragraph { 36 font-size: 14px; 37 width: 85%; 38 margin-left: 1rem; 39 } 40 41 .hosting-heading { 42 padding-top: 0.5rem; 43 } 44 45 .hosting-paragraph { 46 padding-bottom: 0.5rem; 47 } 48 49 .hosting-image1 { 50 background: url('img/489faa5d-9519-48fa-aa0e-fe9673165e43.jpg') 0 0 no-repeat; 51 } 52 53 .hosting-image2 { 54 background: url('img/b77eb430-aa14-4ceb-a832-109341f798cd.jpg') 0 0 no-repeat; 55 } 56 57 .hosting-image3 { 58 background: url('img/1ad4d764-38a6-464b-8fdd-b0f3339adf2f.jpg') 0 0 no-repeat; 59 }
回答1件
あなたの回答
tips
プレビュー