【CSS】position:relativeで右寄せにする方法

だ~いぶ久しぶりの更新ですが、内容はCSSの備忘録というかなりニッチな内容となっていてなんだか申し訳ない…(汗)

ホームページ制作の打ち合わせ

[position:relative]で右寄せにする方法について、毎回ググっている気がするのでブログに残しておきます。覚えてしまえばとても簡単、たった3行で実現できます。

[position:relative]で右寄せにする方法

[position:relative]で中央に寄せる方法は割とメジャーでこのように書きます。

.position-center {
	left: 50%;
	position: relative;
	transform: translateX(-50%);
}

右寄せにする場合は、これの応用で「left:100%」で要素をwidth分右にはみ出させ、「transform:translateX(-100%);」で左に戻すイメージで実現できます。

.position-left {
	left: 100%;
	position: relative;
	transform: translateX(-100%);
}
Related Posts