jQueryで 可変式な要素を縦に中央揃えにするやり方で タイトルをアイキャッチの真ん中に配置してみた

こんにちは! 今年のBest of the Super Jr. の推しメンは ロウ・キー の @dutchisover です!

記事ページのアイキャッチやらタイトルやらの配置などなど変えました! 見づらさバツグンだったので。

新しい配置はどうでしょうか? 敢えて前までのデザインは見せません。残さないことにします。

※(2013/05/21追記)高さが都度変動がある要素の場合、今回の記事が有用ですが、もし親要素の高さが決まっている場合は CSSだけで対応できます。詳細は新しく記事を書きました! CSSでテキストを指定要素へ縦中央揃えにする(複数行対応版) | LogicA ので参照願います。
また、サンプルのテキストボックスの表示がおかしかったので修正しました。修正前にご覧頂いた方々ごめんなさい m(__)m

高さが変動する要素をピッタリ真ん中にしたい

ということで、このブログのタイトルです。タイトルは最近はがんばってロングテール的なものを考慮して、少し長めにしてました。
ですが、長くするとハミ出します。もしくは2列や3列になります。今までのデザインだとぐちゃぐちゃになります。なのでやめました。

変動しない要素、つまり 高さが決まっていたり、列が決まっているインライン要素などであれば、HTMLとCSSで調整して簡単に縦で真ん中に揃えられるんです。

参考サイト to-Rさん

参考になります!基本はココで紹介されているやり方がベースになってます。
けど、タイトル(ウチはh2です)のようなブロック要素で都度 高さの値(列数)が変動すると真ん中からズレてしまいます。カッコ悪いのでなんとかしてみようとして何とかしてみました。

サンプルです

ほげほげホゲホゲhogehogeHOGEHOGE

青い部分がアイキャッチエリアになります。
白い帯が 今回のキモ。タイトルエリアになります。白帯の中の赤字がタイトルになります。
今回はわかりやすいように、青いアイキャッチエリアの縦ど真ん中に線を入れています。

下のテキストボックスに入れた文字がそのままタイトルに入ります。適当に長文になるように入れてみてください。(出来れば全角日本語で)
列が増える度に高さが変わり、白帯エリアが高くなりますが、真ん中からズレません。やりました!

コードです

まずはHTMLです。

jQueryはこんな感じです。

ちなみにCSSはこんな感じにしてます。

jQueryのコードの説明します

真ん中にオフセットさせる

VarticalMiddle

まず、アイキャッチエリアの高さを取得

タイトル(h2)のエリアの高さ(height)を取得

差分の値(中心からコンテンツの50%を上げたポイント)を取得

幅を常にアイキャッチエリアと同じにする

AlignCenter

ついでに、タイトルの幅は パディングで内側に設けた余白部分も含めてになります。パディングが後から変動されても対応できるように、コードを追記しています。

まずはアイキャッチの幅(width)を取得

左右のパディングの値を取得(数値化)

差分の値がタイトル(h2)のwidthの値

タイトルの位置を調整する

取得した 縦の中央揃えの値と、パディング抜きしたwidthの値を指定して完了です。

※ 入力フォームの箇所は今回は端折ります。でも、入力がリアルタイムで反映するようにしたり ちょっと工夫はしましたw

CSSでの注意点

今回はタイトルの文章が右端で折り返してくれない状態に一度陥りました。全角なら white-space: normal で回避できるんですが、半角英数字だと突き抜けます。貫通します。

半角英数字用のCSSで、 word-break: break-all というものを使ってみたところ、ChromeやIEでは上手いこと行きました。ですが、Firefox Opera あたりはダメでした。(2012.4.26 最新版)

まあ、今回のケースでは自ブログのタイトルに使うところなので、調子こいて半角英数字のタイトルにしなければいいだけなので まあいいです。
また解決策が見つかったら試してみて、良ければご報告します。

Sponsored