*

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.

関連記事

WordPressのテーマを「stinger」に変えたよ

しばらくぶりにブログ(Wordpress)のテーマを変更しました。 以前はオールホワイトで

記事を読む

【wordpress】buddypressでの子テーマの作リ方

先日BuddyPressのインストール方法をお伝えしましたが、インストールしたままテーマを変

記事を読む

さくらインターネットでPEARを使ってみる

以前、自分が持っている書籍を管理するアプリ「ブックマネージャー」を作ってアップしてたのですが

記事を読む

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

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

記事を読む

no image

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

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

記事を読む

no image

postgresqlのvacuumでビビった件

ある日突然、サービスが落ちていると連絡を受けました。 URLにアクセスしてみると、確かにサ

記事を読む

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

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

記事を読む

ブログでアクセス増やすためにはやっぱりタイトルと記事が重要らしい件

最近はアクセス数にも気をつけてるので、ブログのアクセスを増やす方法が書かれた記事が気になりま

記事を読む

no image

AmazonEC2にcakephp2入れたときにエラーが出た件

  たぶんEC2にはcakephpをこれからも入れるだろうから自分用にエントリー。 Amazon

記事を読む

no image

タグクラウド機能を付加。

右側のナビにタグクラウドを付けた。どうでしょうか。それにしてもワードプレスってタグが簡単だよね。wp

記事を読む

Google AD

Google AD

PAGE TOP ↑