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プロパティで位置を設定するのが良さそう。
関連記事
-
-
IE11でSB Admin2のログインページの表示がおかしい
ダッシュボードや管理画面を作成する際、SB Admin2を使うことが多い。ダッシ ...
-
-
CodeIgniter4&Bootstrap&jQueryで簡易版お問い合わせページの作成
CodeIgniter4.4.4&Bootstrap&jQuer ...
-
-
画像ホバー時にエフェクトを追加したり文字を重ねられる「Izmir」ライブラリの利用方法
Lightboxを使用しているページで画像をクリックすると拡大表示されることをユ ...
-
-
要素の表示or非表示
今まで要素の表示or非表示をCSSで操作する際、 display:none; / ...
-
-
jQueryの日付&時間のピッカー(bootstrap-datetimepicker)について
日付のピッカーはよく見るけど、時間のピッカーはあまり見ないので、普通のセレクトメ ...