画像を縦の中心にしたい align

HTMLの画像タグのプロパティ「align」の値の違いについて調べてみました。文章中に画像を挿入し、画像をテキストの中心に合わせたいのに、ずれてしまう。

home HOME about About this site Mail Mail

画像を縦の中心にしたい align

Last update 2019-07-26 20:54:41

twitter Facebook はてブ LINE pocet

 

テキストの文章中に画像を挿入するときに、画像の位置をテキストに対して中央に配置したいのですが、画像の大きさなどによって思っていた通りの位置にいかないことがあるので、いろいろな「align」の値を変えてどのような変化があるのか確認してみました。

Sponsored Link

 

大きい画像の場合

指定なし 大「何も指定していない」場合

topの場合 大「top」の場合

middleの場合 大「middle」の場合

bottomの場合 大「bottom」の場合

texttopの場合 大「texttop」の場合

absmiddleの場合 大「absmiddle」の場合

absbottomの場合 大「absbottom」の場合

align=topの場合

iPhoneでAline topを見た場合「top」の場合、画像の上端にテキストの上端がそろうはずなのですが、拡大してみると若干下に下がっています。

大きい画像でaling texttopの場合「texttop」の場合は「top」よりも上端がそろっています。

iPhoneのSafariで見た場合のtopちなみにiPhoneの「Safari Safari」と、Windowsの「Chrome」はほぼ同じように表示させるらしく、「top」だと若干下に下がっています。

中央表示の違い

middleの場合 大「middle」の場合

absmiddleの場合 大「absmiddle」の場合

大きい画像でalignがmiddleの場合一見同じように見える「middle」と「absmiddle」ですが、「middle」は画像の中心部とテキストのベースラインがそろっています。

大きい画像でalignがabsmiddleの場合それに対して「absmiddle」は、画像の中心部とテキストの中心部がそろっています。
「abs」は「absolute絶対的」の略だと思われます。

iPhoneのSafariで見た場合のmiddleiPhoneの「Safari Safari」もWindowsの「Chrome」とほぼ同じ感じ。

小さい画像の場合

middleの場合「middle」の場合

absmiddleの場合「absmiddle」の場合

何も指定しない「何も指定していない」場合

topの場合「top」の場合

bottomの場合「bottom」の場合

bottomの場合「baseline」の場合

30ピクセルの画像の場合、「middle」は画像の中心部にテキストのベースライン(底辺)がそろうので真ん中よりも上の方にあるように表示されます。
「absmiddle」は中心部に表示されています。

「top」は画像の上端よりテキストの上端が少し下なので、画像が小さいと中心部付近に見えてきます。

複数の画像が混在する場合

ややこしいのは1行(もしくは同じ段落)に、複数の画像が混じり、それぞれの「aling」が別々の値の場合です。

topの場合 top absmiddleの場合 middle absmiddleの場合 bottom

topの場合 bottom absmiddleの場合 middle absmiddleの場合 top

topの場合 bottom topの場合 absmiddle topの場合 absbottom

topの場合 top bottomの場合 baseline

topの場合 大 top absmiddleの場合 middle

さらに小さい画像の場合

top 小「top」の場合

middle 小「middle」の場合

absmiddle 小「absmiddle」の場合

指定しない 小 何も指定しない場合

bottom 小「bottom」の場合

absbottom 小「absbottom」の場合

他の画像のtop 他の画像の「top」

複数の大きさの画像

topの場合 top top 小 top middle 小 middle

最後は12pxの画像で比較してみました。この場合、何も指定しない場合か「bottom」が画像の中心に見えますね。

関連ページ

最終更新日 2019-07-26 20:54:41

 

twitter Facebook はてブ LINE pocet

Sponsord Link

 

投稿日:2019-07-26 | このページのトップへ | コメントを書く | 管理

カテゴリー

同じカテゴリーの記事