2行の文章の1行目のみをボックスの縦の中央にそろえたい

Question

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行目のみを縦の中央にそろえるにはどうすればいいのでしょうか？
よろしくお願いします。

Comments

[Lhankor_Mhy]

text-align ではダメということですよね？

[Lhankor_Mhy]

ああ、縦方向なんですね。了解しました。

p は h1 に続けばいいのでしょうか？

[cheshire-cat]

text-alignは横の中央ぞろえだと思うのですが、縦の中央ぞろえも使えるのですか？　
もし縦の中央ぞろえにも使えるのであれば、text-alignでもいいです。
できれば具体的に書き方を教えていただけると助かります。

[cheshire-cat]

pはh1のすぐ下に入ります。

[Lhankor_Mhy]

yambejpさんの回答にもありますが、高さはどうなっていますか？

[cheshire-cat]

高さはレスポンシブ対応させますので変化します。
高さが変わってもpがh1よりも10px下にあることは変わりません。

[Lhankor_Mhy]

高さがコンテンツ依存ということは、内容物がはみ出ると思いますが、それはかまいませんか？

[cheshire-cat]

boxの高さは300px～500pxあります。
そのため内容物（今回はテキスト2行のみ）がはみ出すことはないです。

[Lhankor_Mhy]

高さは不定だが、十分なスペースの分だけ指定されている、ということですね？
問題を把握しました。

[yambejp]

いまさらですが、h1の閉じタグがh2になっています・・・

Answer 1

下記のような感じでどうでしょうか？

.box {
  background-Color:yellow;
  display:flex;
  align-items: center;
  height:200px;
}
.text {
  position:relative;  
}

.box h1{
  background-Color:aqua;
  margin: 10px 0;
}
.box p{
  position: absolute;
  background-Color: lime;
  line-height: 1.5em;
  bottom: -1.5em;
  margin: 0;
}

• .text に position:relative; を設定してこれを座標基準にする。

• .box p は position: absolute;で絶対位置指定してbottomに line-heightのマイナス値を設定する。これで h1 の底辺にくっつく。（初期値はブラウザによって異なるかもしれないので明示的に指定する。）

• h1 と p との余白10pxは h1 の上下マージンで設定。

Comments

[Lhankor_Mhy]

その手がありましたか……
Firefox だと bottom いらなかったです。

[hatena19]

確認してみたら Chromeでも bottom いらないようです。
あと、yambejpさんの回答で気づきましたが、p の margin-top で余白付けてもいいですね。

[Lhankor_Mhy]

あー、yambejpさんの2つめのご回答も絶対配置の静的位置を使っているんですね。
これは勉強になりました。

Answer 2

.boxが高さをもたないと厳しいと思いますが・・・
またpはmarginを殺してください

Comments

[yambejp]

※div.textを追加しました

<div class="box">
<div class="text">
<h1>ホームページのタイトル</h1>
<p>ホームページの説明文</p>
</div>
</div>

<style>
.box {
background-Color:yellow;
display:flex;
align-items: center;
position:relative;
/*height:200px;*/
}
.box h1{
background-Color:aqua;
}
.box p{
position:absolute;
background-Color:lime;
bottom:10px;
margin:0px;
}
</style>

[cheshire-cat]

ご回答ありがとうございます！

すみません。boxの高さを書き忘れていました。
boxには高さがあり、レスポンシブ対応させますので、画面サイズに応じて高さが変化します。

そのため高さが変化しても1行目のみを中央ぞろえにする方法を考えています。
pがh1の下10pxのところにあるというのは、boxの高さが変わっても常に一定です。

[yambejp]

＞ pがh1の下10px

あ、h1の下ですね・・・ちょっと認識が違いました。
.box {
background-Color:yellow;
height:300px;
display:flex;
align-items:center;
}
.box h1{
margin:0;
background-Color:aqua;
}
.box p{
margin-top:10px;
position:absolute;
background-Color:lime;
}

[cheshire-cat]

すみません。やってみたけどうまくいきませんでした。
その方法ではh1とpが重なりませんか？　margin-top:10pxでは、pはh1と重なって少しずれるだけだと思うのですが…。

[yambejp]

一応codepenに転記しておきました
https://codepen.io/yambejp/pen/GRqWVLK

失礼しました、中のdiv.text書き忘れてましたね

[hatena19]

yambejpさんのサンプルでうまくいきますね。
position: relative; がないのになんでうまくいくんだろう。
ない場合は body基準になるとおもっていたのですが。

[cheshire-cat]

みなさんありがとうございます。

yambejpさんの方法でうまくいきました。
h1が起点になるということですね。boxを基準にpositionを使うことばかり考えていました。

Answer 3

calc で計算をするしかないと思います。

サンプル

:root{
  --lh: 1.5;
  --h1-font-size: 2rem;
}

h1{
  line-height: var(--lh);
  font-size: var(--h1-font-size);
}
.box{
  height: 300px;
  position: relative;
}
.text{
  position: absolute;
  top: calc( 50% - var(--h1-font-size) * var(--lh) / 2 );
}
p{
  margin-top: 10px;
}

Comments

[cheshire-cat]

ご回答ありがとうございます。

計算をする方法は考えていませんでした。試してみます。