Subscribed unsubscribe Subscribe Subscribe

CHROMA

世の中の "当たり前" を確認する

ときどき中央揃えにはマイナス margin を使う

このように left 等の値でオブジェクトサイズ分微妙に中央からそらすやり方では、デバイスサイズが変わると表示位置がずれる。

.hoge:after {
  content: "⌃";
  position: absolute;
  bottom: -2px;
  left: 49.2%; /* <- */
  width: 30px;
  height: 15px;
  ...
}

マイナス margin をオブジェクトサイズの半分とって中央揃えさせるほうが良い。
デバイスのサイズに左右されずに中央が取れる。

.hoge:after {
  content: "⌃";
  position: absolute;
  bottom: -2px;
  left: 50%; /* <- */
  margin-left: -15px; /* <- */
  width: 30px;
  height: 15px;
  ...
}