CSSで、可変するコンテンツの高さ半分だけ上にずらしたレイアウトにしたい。

Question

しばらく悩んだのですが、いい解決方法がないためお知恵をお貸しいただければと思い投稿させていただきます。

前提・実現したいこと

コンテンツの高さ半分だけ要素を上にずらしたいです。
（piyoにfugaが重なっているような状態です）
transform: translateY(-50%);では、ずらしたぶんだけの余白ができてしまうのを回避したいです。
要素が可変であるため、px単位での位置指定はしたくありません。
position:absolute;での指定も、高さ指定が必要になるためできません。

該当のソースコード

<div class="hoge">
  <figure class="piyo">
    <img src="piyopiyo.jpg" />
  </figure>
  <div class="fuga">
    <p>ダミーテキスト</p>
  </div>
</div>

.fuga{
  transform: translateY(-50%);
}

上記コードの問題点

実現したいこと〜にも記載しましたが、ずらしたぶんだけ余白が下にできてしまうのが問題点です。
ネガティブマージンを使うことも考えましたが、高さがどれだけになるかがわかっていないとできないため、
現実的ではありません。

jsを使ってしまえばできると思いますが、それ以外に方法がないかと思い、投稿いたしました。
なにかよいお知恵を拝借できれば幸いです。よろしくお願いいたします。

Comments

[yambejp]

とりあえずclassがclas担っている箇所だけ質問を直してください

[chkana]

申し訳ありませんでした、修正いたしました。

Answer 1

CSSだけでは難しそうです。
JavaScript か jQuery ですることになるかも。
私が知らないだけかも知れませんが。

jQuery でのコード例

$(function(){
  var e = $(".fuga");
  e.css('margin-top', -e.height()/2);
})

ネガティブマージンで上に移動させてます。

Comments

[chkana]

ご回答ありがとうございます！
やはりCSSだけでは難しいのでしょうね…。CSSだけでできればスマートだなと思ったのですが…。

ありがとうございました！