CSS 左右中央揃え と 左右中央揃え&横並び

したいこと

左右中央揃え

text-align: center;

sample01.html.slim

.wrapper01
  ul
    li sample01
    li sample01
    li sample01

sample01.scss

.wrapper01 {
  width: 400px;
  height: 400px;
  background-color: #ccc;
  ul {
    text-align: center;
    li {
    }
  }
}

margin: 0 auto;

widthの指定が必須

sample02.html.slim

.wrapper02
  ul
    li sample02
    li sample02
    li sample02

sample02.scss

.wrapper02 {
  width: 400px;
  height: 400px;
  background-color: #ccc;
  ul {
    margin: 0 auto;
    width: 18%;
    li {
    }
  }
}

display: flex;

中央に寄せたい要素の親にflexをかける。

sample03.html.slim

.wrapper03
  ul
    li sample03
    li sample03
    li sample03

sample03.scss

.wrapper03 {
  width: 400px;
  height: 400px;
  background-color: #ccc;
  display: flex;
  justify-content: center;
  ul {
    li {
    }
  }
}

左右中央揃えで、横並び

text-align: center; + display: inline-block;

sample01-1.html.slim

.wrapper01-1
  ul
    li sample01-1
    li sample01-1
    li sample01-1

sample01-1.scss

.wrapper01-1 {
  width: 400px;
  height: 400px;
  background-color: #808080;
  ul {
    text-align: center;
    li {
      display: inline-block;
    }
  }
}

margin: 0 auto;　+ display: inline-block;

widthの指定が必須

sample02-2.html.slim

.wrapper02-2
  ul
    li sample02-2
    li sample02-2
    li sample02-2

sample02-2.scss

.wrapper02-2 {
  width: 400px;
  height: 400px;
  background-color: #808080;
  ul {
    margin: 0 auto;
    width: 71%;
    li {
      display: inline-block;
    }
  }
}

display: flex;

中央に寄せたい要素の親にflexをかける。

sample03-3.html.slim

.wrapper03-3
  ul
    li sample03-3
    li sample03-3
    li sample03-3

sample03-3.scss

.wrapper03-3 {
  width: 400px;
  height: 400px;
  background-color: #808080;
  ul {
    display: flex;
    justify-content: center;
    li {
    }
  }
}

コメント

左右中央揃え/横並びは、flexを使用するのがとても便利