【html/CSS】右寄せができない原因と解決方法
2022年08月16日
「右寄せしたいのに右寄せにならない！なぜ!?」
右寄せができない原因と解決方法を解説します。
右寄せする方法は複数あるため、あなたがおこなった右寄せに合わせて確認してみてください。
目次
【align="right"が効かない】
html属性「align」に「right」を指定したのに効かないときは下記理由が考えられます。
text-alignが指定されているから
text-alignはalign属性のCSS版です。html属性とCSSで被った場合はCSSが優先されます。
align属性は廃止されているため、text-alignを使いましょう。
text-alignが効かない理由と同じ
align属性はtext-alignとほぼ同じであるため効かない理由も同じです。
下記「text-align:rightが効かない」理由も確認してください。
CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。
↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓
↑「副業してもう少し稼ぎたい！」というかたのために副業の方法も解説しています。
【text-align:rightが効かない】
インライン要素に指定しているから
text-alignが効く条件は以下の3つです。
- ブロック要素に指定していること
- そのブロック要素内にインライン要素があること
- ブロック要素に幅があること
条件に合っているか確認しましょう。
詳しくは下記をご覧ください。
【margin-left:autoが効かない】
「margin:auto」はインライン要素に効かないから
margin:autoが効く条件は以下の2つです。
- ブロック要素に指定する
- 「width」を指定する（auto,100%以外）
条件に合っているか確認しましょう。
詳しくは下記をご覧ください。
【justify-content:flex-endが効かない】
justify-contentを使っている場合、考えられる理由は複数あります。
- 【原因1】flexを指定していない
display:flexを指定する - 【原因2】marginを指定している
子要素のmargin:autoを削除する - 【原因3】beforeやafterがある
beforeやafterが孫要素になるようにする - 【原因4】flex-direcion:columnで縦並びにしている
align-itemsで位置調整する - 【原因5】2行になっている
text-align:centerも指定する
詳しくは下記をご覧ください。
【position:absolute;right:0が効かない】
position:absoluteで右寄せしている場合も考えられる理由は複数あります。
- 親要素に「position:relative」を指定しているか確認
- 親要素に「overflow:hidden」が指定されていないか確認
- 親要素の高さが0になっていないか確認
- z-indexが負けていないか確認
- topやbottomの数値を確認
詳しくは下記をご覧ください。
「この記事の内容がよくわからなかった…」「なんかうまくいかなかった…」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。
わからないまま突き進むより基本を学ぶのが結局近道です。
