Q&A
うまく中央ぞろえにできません。
box2のなかにbox1を3つ中央ぞろえで並べたいのですが、うまくできません…
いろいろ調べたのですが、一つ一つの要素を中央に揃える方法が多く、
複数要素(図のa,b,c)をセンタリングする方法が知りたいです。
調べ方が悪い可能性も十二分にありますが、
そもそもHTML,CSSの考え方として、複数要素をセンタリングすることってないのでしょうか…あまり分かっておらず申し訳ないですが、ご教示いただけますと幸いです。
CSS
1.kadomaru { 2 border: 1px solid; 3 border-radius: 20px; 4 padding: 1em; 5 background: #ffffff; 6 margin: 30px auto; 7 width: 80%; 8 height: 400px; 9} 10.inner{ 11 top: 0; 12 bottom: 0; 13 left: 0; 14 right: 0; 15 position: absolute; 16 margin: auto; 17} 18.clear{ 19 clear:both; 20} 21 22.l{ 23 float:left; 24} 25 26.box1{ 27 width: 30%; 28 height: 95%; 29 border: 1px solid; 30 margin: 3px auto; 31 align="center" 32} 33 34.box2{ 35 border: 1px solid; 36 height:50%; 37 width:90%; 38 position: relative; 39 margin: auto; 40}
html
1 2<body> 3 4<div> 5 <div class = "kadomaru inner"> 6 <div class="box2"> 7 <div class="box1 l">a</div> <div class="box1 l">b</div> <div class="box1 l">c</div> 8 </div> 9 <div class="clear box2">d<a href="#" class="btn inner">Start</a></div> 10 </div> 11</div> 12 13</body>
回答1件
0
ベストアンサー
floatではとても面倒 (≒不可能) です。display: flex;なら可能です。
CSS
1/* 2.l{ 3 float:left; 4} 5*/ 6.box2 { 7 display: flex; /* 追加 */ 8 justify-content: center; /* 追加 */ 9}
あと思わぬ挙動をしてしまうかもしれないので、
.box1のCSSの記述にあるalign="center"は削除していたほうがいいです。
投稿2020/03/25 12:44
編集2020/03/25 12:54
総合スコア4528
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/03/25 13:18