画像を縦の中心にしたい align
HTMLの画像タグのプロパティ「align」の値の違いについて調べてみました。文章中に画像を挿入し、画像をテキストの中心に合わせたいのに、ずれてしまう。
最終更新日:2019-07-26 20:54
テキストの文章中に画像を挿入するときに、画像の位置をテキストに対して中央に配置したいのですが、画像の大きさなどによって思っていた通りの位置にいかないことがあるので、いろいろな「align」の値を変えてどのような変化があるのか確認してみました。
大きい画像の場合
「何も指定していない」場合
「top」の場合
「middle」の場合
「bottom」の場合
「texttop」の場合
「absmiddle」の場合
「absbottom」の場合
align=topの場合
「top」の場合、画像の上端にテキストの上端がそろうはずなのですが、拡大してみると若干下に下がっています。
「texttop」の場合は「top」よりも上端がそろっています。
ちなみにiPhoneの「 Safari」と、Windowsの「Chrome」はほぼ同じように表示させるらしく、「top」だと若干下に下がっています。
中央表示の違い
「middle」の場合
「absmiddle」の場合
一見同じように見える「middle」と「absmiddle」ですが、「middle」は画像の中心部とテキストのベースラインがそろっています。
それに対して「absmiddle」は、画像の中心部とテキストの中心部がそろっています。
「abs」は「absolute」の略だと思われます。
iPhoneの「 Safari」もWindowsの「Chrome」とほぼ同じ感じ。
小さい画像の場合
「middle」の場合
「absmiddle」の場合
「何も指定していない」場合
「top」の場合
「bottom」の場合
「baseline」の場合
30ピクセルの画像の場合、「middle」は画像の中心部にテキストのベースライン(底辺)がそろうので真ん中よりも上の方にあるように表示されます。
「absmiddle」は中心部に表示されています。
「top」は画像の上端よりテキストの上端が少し下なので、画像が小さいと中心部付近に見えてきます。
複数の画像が混在する場合
ややこしいのは1行(もしくは同じ段落)に、複数の画像が混じり、それぞれの「aling」が別々の値の場合です。
top middle bottom
bottom middle top
bottom absmiddle absbottom
top baseline
top middle
さらに小さい画像の場合
「top」の場合
「middle」の場合
「absmiddle」の場合
何も指定しない場合
「bottom」の場合
「absbottom」の場合
他の画像の「top」
複数の大きさの画像
top top middle
最後は12pxの画像で比較してみました。この場合、何も指定しない場合か「bottom」が画像の中心に見えますね。
Sponsored Link
関連ページ