カテゴリ別メニュー
＞趣味の時間＞無料イラスト素材＞無料アイコン素材
無料アイコン素材集
無料アイコンとは
矢印なんかのアイコンです。ワンポイントにどうぞ！
こんな素材でも使用に際しては「注意事項」はお守りくださいネ。
矢印アイコン
2007.07.27
ワンポイントコラム：画像と文字の中心軸をあわせる
画像と文字を同じ行に使うと、画像と文字の中心軸がずれて気持ち悪いことがあります。
例）
画像と文字の中心軸がずれてしまいます。
画像と文字の中心軸がずれません。
↑違いが分かります？
画像と文字の中心軸がずれてしまいます。
画像と文字の中心軸がずれません。
↑文字が小さいとわかりやすいと思います。
でも、画像のタグに「style="vertical-align:middle;"」を追加すれば大丈夫。
スタイルシートで指定すればHTMLソースがもっとスッキリします。
さらに、画像の余白を指定すれば、画像と文字が近すぎるときも大丈夫。
画像と文字の中心軸がずれません。
画像と文字の中心軸がずれません。
↑下の例では、画像と文字が少し離れているので読みやすいでしょ。
|
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
ワンポイントコラム：画像と文字の中心軸をあわせる
画像と文字を同じ行に使うと、画像と文字の中心軸がずれて気持ち悪いことがあります。
例）
画像と文字の中心軸がずれてしまいます。画像と文字の中心軸がずれません。↑違いが分かります？
画像と文字の中心軸がずれてしまいます。画像と文字の中心軸がずれません。↑文字が小さいとわかりやすいと思います。
でも、画像のタグに「style="vertical-align:middle;"」を追加すれば大丈夫。
スタイルシートで指定すればHTMLソースがもっとスッキリします。
img{vertical-align:middle;} （スタイルシートで指定する場合に追加）
.*** img{vertical-align:middle;} （class***で指定した範囲のimgタグに適用）
.*** img{vertical-align:middle;} （class***で指定した範囲のimgタグに適用）
さらに、画像の余白を指定すれば、画像と文字が近すぎるときも大丈夫。
画像と文字の中心軸がずれません。画像と文字の中心軸がずれません。↑下の例では、画像と文字が少し離れているので読みやすいでしょ。