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. Ember Burger Menu

    CSS

    豊富なアニメーションを有するハンバーガーメニュー「Ember Burger Menu」

    Ember Burger Menuは、豊富なアニメーションを有するカス…

  2. (cs)spinner

    CSS

    CSSだけでミニマルなローディングアニメーションを実装できる「(cs)spinner」

    CSSだけでローディングアニメーションを実装できる「(cs)spinn…

  3. CSS

    CSSのfloatで回り込みさせたテキストを画像や要素の下に回り込ませないやり方

    ちょっとしたCSSのTipsです。結構使う機会があるのでメモがてら残し…

  4. CSSでborderにグラデーションをかけたようにする

    CSS

    CSSでborderにグラデーションをかけたようにするやり方

    CSSでborderにグラデーションを直接かけたいんですが、なんかでき…

  5. Light Modal

    CSS

    パワフルでカスタマイズ性に優れたCSSモーダル「Light Modal」

    Light Modalは、軽量・パワフルでカスタマイズ性に優れたCSS…

  6. CSS

    CSS3でシンプルで簡単なボタンを作ってみる

    CSS3を使って簡単なボタンを作ってみました。画像を使わなくてもCSS…

コメント

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

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

最近の記事

  1. SF-G64T
  2. USB Type-C搭載ドッキングステーション
  3. RX100M6

Facebookページ

PAGE TOP