Webサイトコーディングにおけるvertical-alignを用いた縦方向の位置の調整について

CSS

Webサイト制作において、文字と画像を同じ行に配置した場合のコーディング時に、狙った通りの位置になかなか合わない場合がある。

その場合に使える対応策として、CSSでvertical-alignを指定するというものがある。

vertical-alignはインライン要素とtableタグ内のセルにのみ有効で、指定した要素の縦方向の配置基準とその親となる要素の縦方向の配置基準をそろえるという機能を持っているらしい。

そこで背景にボーダー画像を設定して、わかりやすいように文字サイズを調整し、vertical-alignの各設定値ごとに結果を確認してみた。

また、リストなどの頭出しの記号として画像を配置する場合にも使えそうなので、20×20pxの画像にもvertical-alignを指定し、表示している。

以下、コード。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vertical-alignの検証</title>
<style>
body, div, p, span{
　margin:0;
　padding:0;
}
body {
　width:1400px;
}
p{
　margin-left:10px;
　font-size:80px;
　border: solid 1px #666;
　background:url(blog_images/borderbg_50.jpg) repeat-x;
}
a{
　text-decoration:none;
　font-size:40px;
　border: solid 1px #00C;
}
a.one, img.one{
}
a.two, img.two{
　vertical-align:auto;
}
a.three, img.three{
　vertical-align:baseline;
}
a.four, img.four{
　vertical-align:bottom;
}
a.five, img.five{
　vertical-align:central;
}
a.six , img.six {
　vertical-align:inherit;
}
a.seven, img.seven {
　vertical-align:middle;
}
a.eight, img.eight {
　vertical-align:sub;
}
a.nine, img.nine{
　vertical-align:super;
}
a.ten, img.ten{
　vertical-align:text-bottom;
}
a.eleven, img.eleven {
　vertical-align:text-top;
}
a.twelve, img.twelve{
　vertical-align:top;
}
a.thirteen , img.thirteen{
　vertical-align:use-script;
}
</style>
</head> 

<body>

<p>がXjxlT<img src="blog_images/maru.jpg" class="one"><a href="#" class="one">がXjxlT/default</a>　<img src="blog_images/maru.jpg"  class="two"><a href="#" class="two">がXjxlT/auto</a></p>

<br><br>

<p>がXjxlT<img src="blog_images/maru.jpg"  class="three"><a href="#"  class="three">がXjxlT/baseline</a>　<img src="blog_images/maru.jpg" class="four"><a href="#" class="four">がXjxlT/bottom</a>　<img src="blog_images/maru.jpg" class="ten"><a href="#" class="ten">がXjxlT/text-bottom</a></p>

<br><br>

<p>がXjxlT<img src="blog_images/maru.jpg" class="five"><a href="#" class="five">がXjxlT/central</a>　<img src="blog_images/maru.jpg" class="six"><a href="#" class="six">がXjxlT/inherit</a>　<img src="blog_images/maru.jpg" class="seven"><a href="#" class="seven">がXjxlT/middle</a></p>

<br><br>

<p>がXjxlT<img src="blog_images/maru.jpg" class="eight"><a href="#" class="eight">がXjxlT/sub</a>　<img src="blog_images/maru.jpg" class="nine"><a href="#" class="nine">がXjxlT/super</a></p>

<br><br>

<p>がXjxlT<img src="blog_images/maru.jpg" class="twelve"><a href="#" class="twelve">がXjxlT/top</a>　<img src="blog_images/maru.jpg" class="eleven"><a href="#" class="eleven">がXjxlT/text-top</a></p>

<br><br>

<p>がXjxlT<img src="blog_images/maru.jpg" class="thirteen"><a href="#" class="thirteen">がXjxlT/use-script</a></p>
</body>
</html>

以下、表示結果。
←クリックで拡大表示

見比べてみるとそれぞれの違いがある程度は分かる。
指定値についても、一部よく分からないものがあるので、今後分かり次第追記していきたい。

以下、参考情報：