11個目のテスト投稿です。画像を3枚入れて、それぞれ「div」付きの左寄せ、真ん中、右寄せにしたいと思います。

まずは左寄せにします!(*´ω`*)
画像を「指定なし」で挿入します。
画像のタグを全部選択して、「本文」タグの「左寄せ」ボタンをクリックすると「div」付きの左寄せにできます。


test6.jpg
(この文章は終了タグ「/div」のすぐ横から書き始めました)


文章は画像のすぐ下に表示されますね。





では画像の配置を真ん中にします!(*´ω`*)
画像を「指定なし」で挿入します。
画像のタグを全部選択して、「本文」タグの「中央寄せ」ボタンをクリックすると「div」付きの中央寄せにできます。


test7.jpg

(この文章は終了タグ「/div」のすぐ下から書き始めました)


画像の下に1行分ぐらいの空白ができましたね。
CSSの該当部分
.article__content img {
max-width: 100%;
height: auto;
margin-bottom: 10px;
}
この中の「margin-bottom: 10px;」が効いているからだと思います。





最後に、画像の配置を右寄せにします!(*´ω`*)
画像を「指定なし」で挿入します。
画像のタグを全部選択して、「本文」タグの「右寄せ」ボタンをクリックすると「div」付きの右寄せにできます。


test8.jpg


(この文章は終了タグ「/div」の下に1行分、改行してから書き始めました)


うん、2行分ぐらい空いているように感じますね。


カテゴリ「テスト投稿2」の最新記事

この記事へのコメント