こんにちは、mickです。
自分用のお勉強メモ。
HTML の imgタグを中央揃えする方法です
（ブロック要素とインライン要素の復習付き）
img タグはインライン要素
img タグは、インライン要素なので位置を調整できない。
だから、ブロック要素の divタグなどで囲んでから中央揃えなど位置を調整する。
例えば、次のようにする。
<div style="text-align: center;">
<img src="画像URL（パス）">
</div>画像を上下中央揃えたいとき
画像を左右の中央だけでなくて、上下にも揃えたいときは、親になるブロック要素が大きさ（サイズ）をもっている必要がある。
その上で、display:flex;とalign-items: center;、justify-content: center;を指定してやる。
<div class="centering">
<img src="画像URL（パス）"/>
</div>.centering {
background-color: blue;
display: flex;
width: 450px;
height: 400px;
align-items: center;
justify-content: center;
}ブロック要素とインライン要素の復習
HTML には大きく2つの要素に分かれている。
- インライン要素
- ブロック要素
ブロック要素の復習
ブロック要素には次のような特徴がある。
- ブロック要素は、HTML の bodyタグの中で記述するもの
- ブロック要素は、インライン要素と同じようにブロック要素の中に含めることができる
- デフォルトでは、ブロック要素が始まるときは新しい行で始まる（改行する）
- ブロック要素は、インライン要素に比べると大きな構造を構築する
ブロック要素の一覧
ブロック要素の一覧はこちら。
- p
- h1, h2, h3, h4, h5, h6
- ol, ul
- pre
- address
- blockquote
- dl
- div
- fieldset
- form
- hr
- noscript
- table
インライン要素の復習
インライン要素には次のような特徴がある。
- インライン要素は、HTML の bodyタグの中で記述するもの
- インライン要素は、データ（画像など）や他のインライン要素を含めることができる
- デフォルトでは、インライン要素は新しい行から始まらない（改行しない）
- インライン要素は、ブロック要素に比べて小さな構造を構築する
インライン要素の一覧
インライン要素の一覧はこちら。
- b, big, i, small, tt
- abbr, acronym, cite, code, dfn, em, kbd, strong, samp, var
- a, bdo, br, img, map, object, q, script, span, sub, sup
- button, input, label, select, textarea
参考URL：HTML block level and inline elements | w3resource
まとめ。
HTML の imgタグを中央揃えする方法を自分用にメモ。
合わせて、ブロック要素とインライン要素の復習もしました。
どの要素が、ブロック要素なのかインライン要素なのかは結構大事。
これだけで、自分の思うように Web表示ができないときの脱出が早くなります。
記事を読んでくれて嬉しいです。
今日もありがとうございました。
初稿 2021/07/22
