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. li要素の折り返したテキストを揃える

    CSS

    li要素のテキストを折り返した時に頭文字の余白を揃えるやり方

    またどこかで使いそうな感じがしたので記録として残しておきます。ulのl…

  2. 動画をレスポンシブにするCSS

    CSS

    動画をレスポンシブに対応させるCSSのTipsがとても便利

    以前、YouTubeやVimeoからの埋め込み動画をレスポンシブにする…

  3. CSS

    CSSを使ったエフェクトつきボタンを探せる「CSS Buttons」

    CSSでエフェクトがついたボタンを作りたいときに役立つ「CSS But…

  4. Alerts.css

    CSS

    シンプルでピュアなCSSによるアラート実装「Alerts.css」

    Alerts.cssはシンプルでピュアなCSSを使ったアラートを実装で…

  5. (cs)spinner

    CSS

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

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

  6. CSS

    リストを横並びにした際に簡単に均等にすることができるdisplay:table-cellを使ってみる…

    リストを横並びにした際にli要素の幅を簡単に均等にすることができるdi…

コメント

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

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

最近の記事

  1. EH-NA0B
  2. KPS-88
  3. Happy Plugs AIR1
  4. cheero Stream 10000mAh
  5. BOSE HOME SPEAKER 300

アーカイブ

PAGE TOP