コーディングをしていると要素を左右上下に寄せる場面が多々ありますよね。
私の場合、そんな場面で真っ先に思い浮かぶのがtext-align：〇〇（位置指定）なんです。しかし、text-alignが通用しない場面に遭遇してあたふたすることも。（そもそも、要素内の文字に対し使用するのが適切だと思います）
text-alignで位置指定ができない原因は、ブロック要素であること！
今回は、そんなブロック要素に位置指定したい時に役立ちそうな方法をご紹介します。
marginで右寄せ
位置を指定したい要素に対してmarginを以下のように指定してあげます。
margin: 0 0 0 auto;
rightに対して余白0を指定し、leftに対しautoを指定することで自動的に数値を算出してくれるそうな。
試しに、サンプルを用意してみました。
このボタン（btn）に対してmargin: 0 0 0 auto;を指定して右寄せにしてみます。
こんな感じになりました。
指定する際に左右ややこしくなるのが少々デメリットではありますが、いつか役に立つかもしれません。
flexで右寄せ
今度はボタンの親要素であるboxに対し、以下の2つを指定してみます。
display: flex;
justify-content: flex-end;
こんな感じ。
marginやtext-alignと違って右寄せしたい要素自体に指定するのではなく、親要素に指定してあげるのがポイントです。
いかがでしたでしょうか。コツコツとコーディングの引き出しを増やしていきたいですね〜。
コメント