CSS

CSSで画像をfloatさせた時にテキストの行間を綺麗に揃えるやり方

何気にこういう細かい部分を調整してあげると見た目も綺麗なりますよね。CSSで画像をfloatしてテキストを回り込ませた時に、画像の下の余白が1行分くらい空いたりすることってあるかと思います。そんな時はテキストのfont-sizeとline-heightに合わせて画像サイズを決めると綺麗に表示させることができます。ということで以下やり方です。

[ads_center]

テキストの行を画像に合わせる

以下のように画像の下に余白ができる時ってありますよね。

CSSで画像をfloatした時の隙間

これを綺麗に揃えていきます。Webデザインレシピさんの記事が参考になりました。

まずは1行分の高さを計算していきます。font-sizeが14pxでline-heightを1.5にすると

14px × 1.5 = 21px

1行が21pxになります。で、それを8行分にしたとすると

21px × 8行 = 168px

8行で168pxになり、最後にfont-sizeの半分を引きます。

168px – 7px = 161px

これで画像の高さを161pxにしてfloatさせてみると、こんな感じで綺麗に揃うことができました。

CSSで画像をfloatしてテキストを揃える

やっぱり文字が揃っていると綺麗ですね。

関連記事

  1. 背景画像のロゴをRetinaに対応させるCSS

    CSS

    背景画像のロゴをRetinaディスプレイに対応させるCSSのやり方

    背景画像のロゴをMacのRetinaディスプレイに対応させるCSSのや…

  2. CSSで文字の長さに合わせる

    CSS

    CSSで文字の長さにwidthを合わせてbacgroundやborderを表示させるやり方

    CSSでブロック要素のwidthを文字の長さに合わせるやり方をご紹介し…

  3. CSSグラデーションジェネレーター「Gradientoo」

    CSS

    直感的な操作感!CSSグラデーションを作成できるジェネレーター「Gradientoo」

    CSSのグラデーションを作成できる素敵なジェネレーター「Gradien…

  4. CSS

    CSSを使って画像にホバーするとキャプションを表示させるエフェクト

    CSSを使ったホバーエフェクトがとてもよかったのでご紹介します。画像に…

  5. Epic Spinners

    CSS

    CSSによる素敵なスピナーコレクション「Epic Spinners」

    Epic SpinnersはCSSで作成された素敵なスピナーコレクショ…

  6. CSSで背景画像をアニメーションさせる

    CSS

    CSSを使ってテキストに背景画像を設定して背景をアニメーションさせるやり方

    ちょっと個人的にいいなって思ったTipsがあったのでご紹介します。CS…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. TAP-F27-2KP
  2. M32ミニ
  3. CITTA TT5.0
  4. Kindle Oasis

アーカイブ

PAGE TOP