CSS基本チュートリアル

CSSボックスモデル

CSS3基本チュートリアル

CSSリファレンスマニュアル

CSS @規則(RULES)

CSS垂直-align(垂直なアライメント)

CSS垂直-align垂直なアライメント属性は、埋め込みやテーブルセルのボックスの垂直なアライメントを定義するために使用されます。-alignはCSSの重要な特性の1つです。初心者にとっては最初は難しく感じるかもしれませんが、記事の最後に例が示されていますので、この属性を素早く理解し掌握するのに役立ちます。

できること

インラインやインラインブロック要素に適用されます。
要素のアライメントに影響を与えますが、内容には影響しません。（テーブルセルを除く）
テーブルセルに適用された場合、セルの内容に影響を与えますが、セル自体には影響しません。

CSS垂直-align垂直なアライメントの値

値	説明
ベースライン	要素のベースラインは親要素のベースラインと一致します。これはデフォルトの値です。
length	これは指定された長さで要素を増加または減少させるために使用されます。負の値も可能です。
%	これは「行高」属性のパーセンテージで要素を増加または減少させるために使用されます。負の値も可能です。
sub	要素を下標のようにアライメントします。
super	要素を上標のようにアライメントします。
top	要素の顶部は行上の最も高い要素の顶部と一致します。
bottom	要素の底部は行の最も低い要素と一致します。
text-top	要素の顶部は親要素のフォントの顶部と一致します。
middle	要素は親要素の中央に配置されます。
text-bottom	要素の底部は親要素のフォントの底部と一致します。
initial	この属性をデフォルト値に設定します。
inherit	この属性を親要素から継承します。

CSS 垂直アライメントオンラインサンプル

例

<!DOCTYPE　html>　　
<html>　　
<head>　　
<style>　　
img.top　{　　
　　　　vertical-align:　text-top;　　
}　　
img.bottom　{　　
　　　　vertical-align:　text-bottom;　　
}　　
</<style>　　
</<head>　　
<body>　　
<p><img　src="/run/images/heart.jpg"　alt="心型パターン"/>　これはデフォルトの配置方法を合わせた画像です。</p>　　　
<p><img　src="/run/images/heart.jpg"　style="vertical-align:　text-top;"　alt="心型パターン"/>　これはテキストの顶部に配置されたテキストを合わせた画像です。</p>　　　
<p><img　src="/run/images/heart.jpg"　style="vertical-align:　text-bottom;"　alt="心型パターン"/>　これはテキストの底部に配置されたテキストを合わせた画像です。</p>　　
</body>　　
</html>

テストを見て‹/›

出力：

これはデフォルトの配置方法を合わせた画像です。

これはテキストの顶部に配置されたテキストを合わせた画像です。

これはテキストの底部に配置されたテキストを合わせた画像です。

CSS white-space(空白)CSS line-height(行高)