*

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.

関連記事

no image

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

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

記事を読む

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

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

記事を読む

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

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

記事を読む

xamppでSSLの設定をする

以前、xamppでvirtual host の設定をしましたが、xamppを使ってて「あれ、SS

記事を読む

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

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

記事を読む

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

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

記事を読む

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

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

記事を読む

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

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

記事を読む

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

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

記事を読む

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

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

記事を読む

Google AD

Google AD

PAGE TOP ↑