今開発しているアプリで画像を真ん中に表示したかったので
ネットを漁っていたのですが、display:blockとmarginを組み合わせて作るのが一番よさげ
だったので見よう見まねで作ってみました。
今までとりあえずの知識で使っていたのでこの機会に仕組みを理解しようという
ことで一つずつ役割を説明していきたいと思います。
何か間違った覚え方をしていたらすみません。
こちらが今回作ったcss↓
</div>
<div>
<div>#sample img {</div>
<div> display: block;</div>
<div> margin-left: auto;</div>
<div> margin-right: auto;</div>
<div> background-color: #000;}</div>
</div>
<div></div>
<div>
まず、画像をblock要素に指定します。
display blockを指定することで幅・高さを指定し放題になるので
ここで左右marginを設けます。
blockを指定した状態で左右のマージンをautoにすると、左右中央に要素を配置できるようになります。
なお、幅を指定しない限りは親要素と一緒の100％になります。
blockは横並びでは指定できないので、画像の真ん中に
画像を一つつけたい時に使うのが向いています。
シンプルなのでこれくらいしか説明できる箇所ないですね！
当たり前ですがスコープ内がすっきりしている・・・。
cssのセンスが悲しいくらいにないのでプロパティをいれまくってスコープ内をぐちゃぐちゃに
してしまって後でよく混乱するのですが、後から見返して必要不要なプロパティを
分別していくとこれが無いと要素が左に寄ってしまうとかこの値をいじるとブラウザで表示されないとか
仕組みがわかってきて中々楽しくなってきます。
特に過去の自分の書いたコードを見回して自分にツッコミを入れていくスタイルって中々面白くて癖になります。
小さなアウトプットですがこれからも続けていきたいと思います。
