基本中の基本なのですが、あれどうやったかな~と一瞬思い出すまでに時間がかかるので備忘の為掲載。
CSSによるセンタリング。
・インライン要素は、text-algn:center
・ブロック要素は、; margin:auto widthの設定忘れないように
を使うのは必須。
忘れがちなのはこれ → ブロック要素中のブロックのセンタリング
方法1:
子ブロックに position:absolute; left:50%; を設定
忘れずwidthを具体的なpxで設定して、その半分のpxで、margin-left
高さも中央にする時は、top:50%; margin-top を半分の大きさで
方法2:これでも出来るというだけでオススはしません。
親ブロックのCSSに、text-align:center 縦も中央の場合は、vertical-align:middle
を設定して、子ブロック(中央寄せしたいブロック)に; margin:auto
を設定。
ちょっとややこしい。触っていないとあれ?となるよね~
ちなみに、IE6はバグで、text-align:centerでブロック要素もセンタリングできるとか・・・・