*

vertical-alignで画像とテキストの位置を垂直方向で揃える

公開日: : 最終更新日:2014/03/13 テクニック

img vertical-align

これも自分のリマインダー用としてエントリー。

画像とテキストが同じ行に並んでいて、垂直方向に揃えたいとき。
微妙にずれるときがあるんですよね。

pre

たとえば上図のようなとき。
RSSのアイコンと「RSS」という文字が垂直方向にずれています。
識字的には問題ないんですが、何か気持ち悪い。

after

こんな感じで、画像とテキストを同じ行のベースラインで揃えたい。
こんなときはCSSの「vertical-align:text-bottom」を使ってください。

画像に並ぶテキストの位置(垂直方向)を指定する
http://www.tagindex.com/stylesheet/img/vertical_align.html

すごく基本的なことですが、基本的なことほど忘れやすいものなのです。

Google AD


Message

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

This site uses Akismet to reduce spam. Learn how your comment data is processed.

関連記事

WEBサイトの表示速度をスピードアップする方法

サイトの表示が遅いので、いくつかツールを使ってチューニングすることにしました。 まず初めに

記事を読む

【なぜ?!】ブログの直帰率が激減しました【GoogleAnalytics】

少し前から気づいていましたが、このブログの直帰率が激減しました。 まずはこちらの図表からどうぞ。

記事を読む

no image

WEBディレクター募集します

仕事でWEBディレクターが必要になりました。HTML/CSSコーディング、ディレクション経験あります

記事を読む

【体験談】6年間禁煙を続けられた自分の、禁煙の始め方

4月1日から消費税が8%になり、日用品への影響が少しずつ出てきているころです。 自分はお酒

記事を読む

no image

eclipseのリソース名を変更する

ちょっとキョドったのでエントリー。 1. eclipse > エクスプローラー から名前を変更

記事を読む

【今さら】ブラインドタッチができるようになるまでにやった3つの事【もういいでしょ】

過去、仕事で一緒になった人がブラインドタッチが苦手だということがありました。 両手の人差し

記事を読む

wordpressのパーマリンク設定を変更してみたら大丈夫だった件

wordpressでパーマリンクを変えようと思ってたんですが、なかなか踏み切るタイミングがな

記事を読む

no image

Pear::pager と TwitterBootstrap をマッシュアップしてみた

前回に引き続き、WEBアプリをカスタマイズしてみました。 DB使って商品登録をしてると

記事を読む

嫌われている人から好かれようと思わなくていいんだという件

自分用にちょっとしたライフハックに気づいたので、リマインダーとしてエントリー。 それは「嫌

記事を読む

SVNリポジトリのリプレース(とeclipseの設定)

  SVNリポジトリのリプレースを行ったのでエントリー。 1.リポジトリをdump svn

記事を読む

Google AD

Google AD

PAGE TOP ↑