*

ウェッブ制作・パソコン

Width =px

ホーム > HTML・CSS > CSS基本と応用 >
画像やボックス配置 MENU 

画像やボックスの配置で戸惑った時のメモ

横並びボックス display:flex; 中央揃え


画像やボックスの中央揃え

画像をページやボックス、枠内の中央に配置するには、imgタグ内にcssを適用することで中央配置が出来る。

ボックス内画像の下の余白を取る

画像

右の画像のように、ボックスにボーダーを付けて表示すると、画像の下に余白が出てしまうことが解る。

画像ファイルに以下のCSSを付けることで画像がボックス化されて下部余白が無くなる。


ボックスからはみ出す画像

画像

上記のように、ボックス内に画像と文章が存在し、画像を「floar:right;」として右寄せにした時、右の画像のように、文章の高さより画像の高さが大きい時、次に続くセクションの内容が上のボックスに入り込んでしまう現象(画像がボックスから、はみ出したように見える)が起きる。

この現象となる要因は、画像の右寄せ(float:right)が継続してからで、これを解消するには、以下の2つの方法のいずれかで解消出来る。


ボックスの左右中央配置

左右の中央配置で良く利用される「margin:0 auto;」で殆ど出来る。ボックスの長さ(width=)を指定(pxや%など)していないと出来ないので注意。