☹️

justify-aroundで均等配置した真ん中の要素が少しだけずれてしまう問題の解決方法

2024/02/26に公開

原因を探る

三つの要素にjustify-aroundしているのでサイドと中央に配置される、
サイド要素の片方だけが長くなってるのでそのせいでずれが生じていると推測できる

  <div className="text-center">中央です</div>
      <div className="flex w-full justify-around">
        <div>55555</div>
        <div>中央です</div>
        <div>999999999</div>
      </div>

結論

短い方の長さを長い方に合わせてあげれば良さそう、widthを測り短い方に固定値を指定したところ綺麗に中央に配置された

<div className="text-center">中央です</div>
      <div className="flex w-full justify-around">
        <div className="w-[78px]">55555</div>
        <div>中央です</div>
        <div>999999999</div>
      </div>

Discussion