画像の表示位置を調整する方法についての説明です。
まず、調整したい画像にflexを適用させます。
「display: -webkit-flex」「display: flex」
flexはブラウザごとに対応状況が異なるため、これら2つを記述してどのブラウザでも表示されるようにします。この2つさえ記述しておけば、どのブラウザにも対応させることができます。
そして、次のように「justify-content」を用いることで画像の左寄せ・中央寄せ・右寄せができます。
「justify-content: flex-start」
画像の左寄せ
「justify-content: center」
画像の中央寄せ
「justify-content: flex-end」
画像の右寄せ
上から順に左、中央、右。
.position {
display: -webkit-flex;
display: flex;
justify-content: flex-start;
}
.position {
display: -webkit-flex;
display: flex;
justify-content: center;
}
.position {
display: -webkit-flex;
display: flex;
justify-content: flex-end;
}
上から順に左、中央、右。
なお、「上下中央寄せ」にする場合は、「align-items: center」と記入します。「justify-content: center」と組み合わせることで上下左右中央寄せになります。
また、ここで紹介した要素はすべて 「グリッドレイアウト」（display: gridと指定した場合）でも使えます。
調整したい画像にfloatを適用させて左右に寄せる方法もあります。次のように指定することで画像の左寄せ・右寄せができ、そこにテキストを回り込ませることもできます。
「float: left」
画像の左寄せ
「float: right」
画像の右寄せ
上から順に左、右。
.float_left {
float: left;
width: 20%;
margin: 15px;
}
.float_right {
float: right;
width: 20%;
margin: 15px;
}
上から順に左、右。
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
ただ、この状態にすると、下記の追加テキストのように画像の部分にテキストを回り込ませたくない場合も回り込んでしまいます。
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
追加テキスト。追加テキスト。追加テキスト。追加テキスト。追加テキスト。追加テキスト。追加テキスト。追加テキスト。追加テキスト。追加テキスト。追加テキスト。追加テキスト。追加テキスト。追加テキスト。追加テキスト。追加テキスト。追加テキスト。追加テキスト。追加テキスト。追加テキスト。
なので、追加テキストのCSSに「clear: both」を記入すると下記のように回り込まなくなります。
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
追加テキスト。追加テキスト。追加テキスト。追加テキスト。追加テキスト。追加テキスト。追加テキスト。追加テキスト。追加テキスト。追加テキスト。追加テキスト。追加テキスト。追加テキスト。追加テキスト。追加テキスト。追加テキスト。追加テキスト。追加テキスト。追加テキスト。