勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

CSSでfloatやmargin&widthは使わずにブロック要素の中央寄せ・右寄せする方法

  CSS

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プロパティで位置を設定するのが良さそう。

 - CSS

  関連記事

CSSで1つの要素に複数classを設定して画像を入れ替える方法

メニューリンクで通常時の画像、マウスオーバー時の画像、アクティブ時の画像をそれぞ ...

特定のID / Classを持つタグの親要素に対してCSSを割り当てる方法

特定のID / Classを持つタグの親要素に対してCSSを割り当てたい。また、 ...

IE11でSB Admin2のログインページの表示がおかしい

ダッシュボードや管理画面を作成する際、SB Admin2を使うことが多い。ダッシ ...

スマホサイトでviewportを指定しても横スクロールバーが表示される

スマホ用のサイトでviewportが指定されており、widthも100%になって ...

CSSのpointer-eventsプロパティで指定した要素をクリック不可にする方法

ページ内の指定のボタンをクリックしても動作しないという症状が発生し、ソースコード ...