*

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

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

WP-SpamFree by Pole Position Marketing

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

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

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

記事を読む

no image

WEBという革命

自分がインターネットと出会ったのは14~15年前だが、海外に行くことがあって本当にネットの便利さ

記事を読む

no image

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

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

記事を読む

CakePHPでFacebook-PHP-SDKを使ってFacebookログインするアプリの作り方

こんにちは! 昨日は東京では45年ぶりに大雪が降りましたね! 自分の家の方でも雪が2

記事を読む

さくらでcakephpを使って500internal server errorが出る場合の対応

こんにちは! 今日は節分ですね。自分の子供のころ、節分と言えば豆まきだったわけですが、近ご

記事を読む

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

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

記事を読む

postgresqlのスロークエリ(スローログ)を取得する

45年ぶりの雪が、1週おきに降るってどういうことでしょうか? とは言え、雪が降るといつもと

記事を読む

no image

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

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

記事を読む

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

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

記事を読む

cakephp

cakephpでPHPのタイムゾーン設定してないとエラーが出る件

ロリポップからさくらにサーバを変えたのは先日のエントリーの通りですが、サーバ環境が違うことでca

記事を読む

Google AD

Google AD

iPhone6が来ました。アップルのサポートは未だ健在だったというお話。

アップルは製品だけじゃなくて、サポートの対応にまでその企業哲学

iphone6にするか、iphone6plusにするか、まだ決めなくてもいい方法

iphone6が発表されましたね。iwatchは来年に持越しで

パパも2歳になったよ

早いもので子供が2歳になりました。 年を取るごとに年月が早く

転職して新しい職場で仕事始めました

1か月以上もブログを放置してましたが、私は元気です。 むしろ

6月末で現職を退職します

ご存知の方もいらっしゃると思いますが、6月末で現職を退職するこ

→もっと見る

PAGE TOP ↑