2行ある文章のうちの1行目のみをボックスの縦の中央にそろえたいと考えています。
2行目は1行目よりも10ピクセル下にあります。そこで例えば
HTML <div class="box"> <div class="text"> <h1>ホームページのタイトル</h2> <p>ホームページの説明文</p> <div> </div> CSS .box { display:flex; align-items: center; }
と書くと、text全体が縦の方向の中央になってしまい、
h1のみが縦方向の中央に来るわけではありません。
そこで
HTML <div class="box"> <h1>ホームページのタイトル</h2> <p>ホームページの説明文</p> </div> CSS .box { position: relative; } h1 { position: absolute; top: 50% transform: translate(0,-50%); } p { position: absolute; top: calc(50% + 10px); transform: translate(0,-50%); }
と書いたのですが、それだとh1とpが重なってしまい、うまくいきませんでした。
calc(50% + 10px)の10pxを目算で15px,20pxとどんどん増やしていけば、
そのうちh1の下10pxにたどりつくのですが、
そのような手計算するようなやり方はは取りたくありません。
1行目のみを縦の中央にそろえるにはどうすればいいのでしょうか?
よろしくお願いします。
![guest](/img/icon/icnUserSample.jpg)
回答3件
あなたの回答
tips
プレビュー