横並びのカード型のボックスをdivで作り、その中にh1見出しとpタグで囲ったテキストを納めたいです。
問題1:pタグのテキストがはみ出る
h1見出しは文字数が増えても、ちゃんとdivで作ったボックスの中で改行されて収まってくれるのですが、pタグで囲ったテキストは文字数が増えた分だけ、どんどんはみ出して行ってしまいます。
pタグにwidthとheightを指定すれば、その中で収まるのかな、と思ったので、pタグに指定してみましたが、できませんでした。
pタグもh1も同じブロック要素だと思うのですが、どうしてこの2つではみ出したり、はみ出さなかったりするのでしょうか?また、pタグを外側の赤いconteボックスの中におさめる方法はないでしょうか?
問題2:h1をボックス内で中央寄せにできない
今はh1もimgも左端に寄っています。これを、中央寄せにしたいのですが、できません。text-alain:center;にしてみても、h1はブロック要素だからなのか、できません。
今のコードは以下の通りです。
html
1<div class="conte"> 2 <div class="box"> 3 <h1>見出し見出し見出し1</h1> 4 <img src="http://placehold.it/50x50" alt=""> <p>texttexttexttexttexttexttexttexttexttexttexttext</p> 5 </div> 6 <div class="box"> 7 <h1>見出し2</h1> 8 <img src="http://placehold.it/50x50" alt=""> <p>texttexttexttexttexttexttexttexttexttexttexttext</p> 9 </div> 10 <div class="box"> 11 <h1>見出し3</h1> 12 <img src="http://placehold.it/50x50" alt=""> <p>texttexttexttexttexttexttexttexttexttexttexttext</p> 13 </div> 14</div>
css
1.conte{ 2 display:flex; 3 justify-content:center; 4 margin:0 auto; 5} 6.box{ 7 background-color:red; 8 margin:20px; 9 padding:10px; 10 width:200px; 11 height:200px; 12} 13.box h1{ 14} 15.box img{ 16} 17.box p{ 18 width:100px; 19 height:100px; 20}
Codepen用意しました。現状がすぐ確認できるので、もしよかったら検証に使ってください。
https://codepen.io/bariko/pen/NWqyxwZ
皆さんのお力を貸していただけますと幸いです。何卒よろしくお願いいたします。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/03/11 07:14