*

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

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

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

関連記事

no image

開発の現場に行って来た

ひょんな事から、他社の開発の現場に行く事に。 念願だったT社に!書類選考で落ちたよT社! 久

記事を読む

composerでcakephpをインストールしてプロジェクトを始めてみる

こんにちは!今日も寒いです。 この時期になると気になってくるのが花粉症です。 自分は花粉

記事を読む

【どうしてこうなった!?】このブログの直帰率が1%を切りました【自分史上初】

以前のエントリーで、このブログの直帰率が80%から20%に激減したことを報告しました。

記事を読む

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

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

記事を読む

no image

wordpressからbloggerに引越し

lolipopで使っているロリポプランは、DBが一つしか使用できない。もうちょっと有効に使えないかと

記事を読む

facebook for PHP SDKを使ってCakePHPでログアウトとポストする方法

ソチオリンピックではスノーボード・ハーフパイプで平野さん・平岡さんが初のメダル獲得をしました

記事を読む

no image

WEBという革命

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

記事を読む

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

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

記事を読む

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

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

記事を読む

postgresqlデータベースにインデックスを作成する方法

ビットコインが取引停止になったり、LINEがスタンプを自由に作れるようにしたり、何かとにぎや

記事を読む

Google AD

Google AD

PAGE TOP ↑