テキストの先頭と画像の先頭をあわせる方法。画像の高さとテキスト行をあわせる方法

テキストの先頭と画像の先頭、画像の高さとテキストの行をあわせたいケースがある。
(画像はfloatさせる)

このような場合、そのままでは画像の先頭とテキストの先頭が
line-heightとの関係であわないケースが出てくる。

このようなときは、以下の計算式を使用するとあわせることが出来るようになる。

画像の上部のマージン算出式
(line-height(単位em) - 1em) /2

画像の高さの算出式
line-height(単位em) * (行数 - 1) + 1em

上記は単位をemとしているが、使用単位にあわせることも可能(pxなど)
pxの場合は端数が出ることがあるので、考慮が必要である。

今回は切り捨てを行ったが、特に問題は発生しなかった。

スポンサーサイト

コメントの投稿

非公開コメント

プロフィール

e.swan

Author:e.swan
FC2ブログへようこそ!

最新記事
最新コメント
最新トラックバック
月別アーカイブ
カテゴリ
検索フォーム
RSSリンクの表示
リンク
ブロとも申請フォーム

この人とブロともになる

QRコード
QR