並べて上下中央揃え
| ドラミちゃん | ドラえもん ドラえもん ドラえもん |
要素としてpで段落構成をしたい場合は、上記のpをdivに置き換えて、その中でpを使ってください。
<div class="Doraemon">
<h2>ドラミちゃん</h2>
<p>ドラえもん<br>ドラえもん<br>ドラえもん</p>
</div>
スタイルシートによる舞台裏は↓これです。
例によって、IEのためのハックです。魔法の言葉 zoom♪ zoom♪ zoom♪。Mac IEもつけておきました。
.Doraemon {
display : table;
}
.Doraemon h2 {
display : table-cell;
vertical-align : middle;
}
.Doraemon p {
display : table-cell;
vertical-align : middle;
}
みんなが買うPCにInternet Explorerが最初から入っていなかったら、ブラウザのシェアはどうなるのか。IE対応を強く考えんでもよかったりして。だが、コンテンツによっては、ActiveXを使用せざるをえない場合があって、自宅では そのためだけにIEを消さずに置いています。
* html .Doraemon h2,
* html .Doraemon p {
display : inline;
zoom : 1;
}
/*\*//*/
* html .Doraemon h2,
* html .Doraemon p {
display : inline-block;
}
/**/
