CSSでfloatやmargin&widthは使わずにブロック要素の中央寄せ・右寄せする方法
CSSでブロック要素を中央寄せする場合はwidth指定しつつ「margin:0 auto」を、右寄せする場合はfloat指定していた。この方法だと中央寄せの場合にPC / SPでwidthが変わる場合は面倒くさいし、右寄せの場合は親要素のmarginがずれるといった問題があり、もっと良い方法を無いか調べたのでメモ。
リファレンス
https://developer.mozilla.org/ja/docs/Web/CSS/justify-content
サンプル
https://taitan916.info/sample/flex-justify-content/
ソースコード
<html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>ブロック要素の左寄せ・中央寄せ・右寄せ</title> <style> .left{ display: flex; justify-content: start; } .center{ display: flex; justify-content: center; } .right{ display: flex; justify-content: end; } </style> </head> <body> <div class="left">左寄せ</div> <div class="center">中央寄せ</div> <div class="right">右寄せ</div> </body> </html>
flex指定しつつjustify-contentプロパティで位置を設定するのが良さそう。
関連記事
SB Adminよりシンプル&軽量なBootstrap系ダッシュボードのテンプレートについて
ダッシュボード(管理画面)を作る際、SB Adminというテンプレートを利用する ...
レスポンシブ対応で右カラムのコンテンツを上に表示させる方法
レスポンシブ対応サイトの簡易なコーディングをする経験があった。何も考えずにHTM ...
cssのcontent
テキストが書かれているけど、firebugで要素を見ても 書かれていない。かとい ...
管理画面やダッシュボードとして便利そうなBootstrap系のテンプレート
新規サイトの立ち上げでダッシュボード、管理画面を作る必要があった。小規模なサイト ...
スクロールしても追尾する要素をプラグイン等は利用せずCSSのみで作成する方法
コンテンツ内をスクロールしても追尾してくる要素を作成したかった。以前にMeeka ...