浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

【css】画像を中央に表示する方法を中のプロパティまで細かく説明してみる

今開発しているアプリで画像を真ん中に表示したかったので
ネットを漁っていたのですが、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のセンスが悲しいくらいにないのでプロパティをいれまくってスコープ内をぐちゃぐちゃに
    してしまって後でよく混乱するのですが、後から見返して必要不要なプロパティを
    分別していくとこれが無いと要素が左に寄ってしまうとかこの値をいじるとブラウザで表示されないとか
    仕組みがわかってきて中々楽しくなってきます。
    特に過去の自分の書いたコードを見回して自分にツッコミを入れていくスタイルって中々面白くて癖になります。
    小さなアウトプットですがこれからも続けていきたいと思います。
  • この記事いいね! (0)