*

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

関連記事

no image

img画像に隙間(空間)ができる件

何度か経験してそのたびにイラッときたので自分用にエントリー。 スタイルシートで下記のように記述

記事を読む

no image

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

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

記事を読む

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

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

記事を読む

【解説】Googleウェブマスターツールの使い方

サイトの分析やアクセス解析のツールと言えばGoogleAnalyticsですよね。 このブ

記事を読む

【アフィリエイト】WordPressプラグイン「AmazonJS」をインストールしてみました

ずん飯尾という芸人さんがいます。 中でも「現実逃避シリーズ」がプチブレイクしていて、現実離

記事を読む

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

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

記事を読む

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

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

記事を読む

no image

開発の現場に行って来た

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

記事を読む

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

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

記事を読む

cakephpでユーザ定義定数を読みだす方法

サイトを作るにあたって、定数を使いたいときがよくあります。 サイト上のある数値に変更があっ

記事を読む

Google AD

Google AD

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

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

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

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

パパも2歳になったよ

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

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

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

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

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

→もっと見る

PAGE TOP ↑