html各要素によってセンタリングの仕方が違います

結論だけをポーンと書いてしまえば早いのですが。
みなさんに「理解」をして頂きたいので、説明の後にアンサーです。
意地悪？ (´・ω・｀)
欧米人の方ってこういうの嫌がるんですよね。とっても((((笑)

要素のふるまいには「ブロック」と「インライン」があります

先日もチラっと触れましたが、
「html5では『ブロックレベル要素』『インライン要素』の別が無くなりました」
という件。
そして
「ブロックレベル・インラインの別はそもそもがCSSボックスモデルなので、無くなったというより完全にCSS管理下に差し戻されたと考えた方が良い」
ということも書きました。
要素 という言葉はhtmlのことを示します。
で、これから扱うのはhtmlではなくCSSですので、「ブロックレベル要素」「インライン要素」という呼称は辞めて、
「ブロック」「インライン」に統一しようと思います。
古い慣習を私自身が引きずってちゃいけませんね。申し訳ないです。

CSSの基本は以下の通りです。
これわかってないと何もわからないと思うので一応書いておきます。

プロパティ名: 値;

この形がCSSの基本です。
コロンの前が プロパティ (property)、コロンの後ろが 値 (value ばりゅー) です。

CSSに display というのがあります。
これが「ふるまい」を司るプロパティです。
「ふるまい」というのはですね、
「どんな特徴？どんな挙動？」と今は考えてもらえれば良いです。
display の値にはいろいろありますが、代表的なものが ブロック と インライン です。

display: block;
display: inline;

こうですね。
html要素というのは必ずこの display の初期値を持っています。
そしてやはりここでhtml5以前にあった「ブロックレベル要素」「インライン要素」の特徴を踏まえてご説明しなければ始まりません。

簡単に言うと

ブロック = 他の要素と横並びにできない
インライン = 他要素が display の値にインラインを持っていれば 横並びにできる

ブロックの場合、相手がブロックであってもインラインであっても横には並びません。
インラインの場合、インライン同士なら簡単に横並びにできます。

display初期値がブロックの代表html要素 = div, table など
display初期値がインラインの代表html要素 = img, span, a など

htmlタグに囲まれていないテキストもインラインです。
インライン同士は横並びになりますので、こういったことができます ↓

ブロックは相手のdisplay値を問わず、横並びにはできません。

テキストを <div> で囲いましたので、インラインからブロックに変更されています。
相手のimgはインラインですが、横に並ばずに下に繰り越しているのがわかると思います。

これをまずしっかり覚えて頂きたいんです (´・ω・｀)
ここがわからないと後が辛いと思います(笑)

text-align はブロックの中のインラインに作用します

「ブロックの中のインライン」の意味はこういうの ↓

赤い背景がブロックです。
その中にインラインである画像が入っています。
この状態から
「真ん中に配置します。」
と言ったとき、3つのパターンがあるのがおわかりでしょうか。

パターン① --- 中身だけ真ん中

パターン② --- 全体が真ん中、中身は左

パターン③ --- 全体が真ん中、中身も真ん中

廃止タグ <center> でできるのは③だけなんです。

<center>
  <div>
    <img src="アドレス" alt="">
  </div>
</center>

細かい内容は省いていますが、centerタグを使うときはこうですよね。
centerタグで囲まれた要素は親から子から孫から全部センタリングされてしまいます。
要素が廃止になる理由は「ナンセンスだから」だ、という個人的意見を書いたのですが、centerタグなんてすっごいナンセンスでしょう？
だってパターン②にしたい時だってあるでしょうよ (´・ω・｀)
なに勝手に全部センタリングしてるのさッ！ って感じ。
「左寄せ」というのはweb上では基本なんです。
位置指定を何も書かなければ勝手に左寄せになるんです。
なのにcenterタグを使ったがばっかりに、中身を左に戻すのにまた位置指定を書かないといけなくなります。
古い書き方だとこんな感じか ↓

<center>
  <div align="left">
    <img src="アドレス" alt="">
  </div>
</center>

初期値なんてのは本来「書かなくて良い」ものなのに、centerを利用したので別途書く羽目に。
ナンセンスってこういうこと。
この例で使っている align という属性も廃止です。念のため。
こちらちょっと気になることもあって後述します。
alignはhtml属性、text-alignはCSSプロパティ
というのは頭に入れてちゃんと区別しておいてください。

centerタグの件はここまでにして、話しを本筋に戻します。
各パターンを説明すると、
① ブロックの中のインラインだけがセンタリング
② ブロックはセンタリング、中のインラインはデフォルトの左
③ ブロックも中のインラインもセンタリング

① のソース

<div style="text-align: center;">
  <img src="アドレス" alt="">
</div>

② のソース

<div style="margin: 0 auto;">
  <img src="アドレス" alt="">
</div>

③ のソース

<div style="margin: 0 auto; text-align: center;">
  <img src="アドレス" alt="">
</div>

ブロックの位置揃えは text-align ではなく margin を使います。
text-align は ブロックの中のインライン にしか効力はありません。

text-align はインラインに作用 ではないですよ。
ブロックの中の インラインに作用です。

というわけで、ブロックをセンタリングするには margin: 0 auto; を指定します。
ブロック左寄せは何も書かなければ左寄せですが、入れ子の状態によっては引き戻しが要りますので、左にするには
margin: 0 auto 0 0;
右寄せは
margin: 0 0 0 auto;
です。
えっと。これがアンサーですね (´・ω・｀)
margin の仕組みについてはめっちゃ難しいので今回は触れません。
tableタグは難しい、と書いた覚えがありますが、正しくは complicated (ややこしい) です。
margin の場合は intricate (難解) です。
CSSで一番難しいんじゃないかって思ってる。
理解しようとすれば、ですよ。

ここまでご拝読頂きまして、いっぱいいっぱいの方はお疲れ様でした。
ゆっくりお休みになって (´・ω・)ﾉｼ
余力のある方は続きどぞ。

text-align: center; や margin: 0 auto; はどこに書くのか

これもよく聞かれるんですよね。
「それを使うことはわかったけど、どこにどうやって書くの？ 」
ってやつね (´・ω・｀)
いずれも ブロックの要素に記します
特に text-align をどこに書いたら良いかわからない方が多いみたいです。

<div>
  <img style="text-align: center;" src="アドレス" alt="">
</div>

<div style="text-align: center;">
  <img src="アドレス" alt="">
</div>

htmlのstyle属性の値として、ブロックの要素に記します。
インラインに直接書きたくなりますが、
インラインは位置指定をダイレクトに解釈することはできません
インラインの位置指定には外回り(親)に必ずブロックが必要です
それが何故か、というのは次の章で。
センタリングしたいものが「画像」や「テキスト」の場合は、divタグで囲ってください。
そしてそちらに style属性及びその値として text-align: center; と記述します。

自分のことさえわからないインライン

何のことかというと「サイズ・範囲」の認識のことです。
ブロックの代表とインラインの代表スパンで比べて行きます。

div君
spanちゃん

div は自身のサイズと共に、自身の親の横サイズも認識します
横ですよ。横。左右ね。
そして先回の記事内容(divとtableのwidthの違い)をご覧になった方はわかると思いますが、
自身に横サイズの指定がない場合、親のサイズと同等 = 100% になるのがデフォルトです。

赤い背景が「親」です。緑が「子」です。
わかりやすいように親にpaddingを設けて完全に重ならないようにしています。
緑は親の横いっぱいを占めています。
親の範囲がわかっているからこそ、自身の横幅を同じにできるわけ。
これがブロックのデフォルトです。

一方 span は

親の赤いっぱいに拡がってないですよね。
そして「サイズ指定は できません」と書いてあります。
インラインにサイズ指定はできないんです。

<span style="width: 300px; height: 200px;">
  あいうえお
</span>

上記のようなサイズ指定は無効です。効きません。

つまりサイズ認識が無い。
自分の中にテキストや画像がある時、「あ。なんか居る」って感じでその範囲はわかりますが、それが何pxかなんちゅーことは理解できない。
従って width や height の指定をしても従ってくれません。
そんな子に親のサイズなど察知できるはずもなく。

と、ここで センタリング という位置関係を考えて欲しいのですが、
何かを真ん中にしたい場合、どこからどこまでの間の真ん中なの？ という条件が必要ですよね。
右端と左端があって初めて「真ん中」があるわけです。
「これちょっと真ん中に置いてよ。」
って言われても、
「どこのだよ (´・ω・｀)」
ってなりますよね。
「グラウンドの真ん中に杭を打ってください。」
と言われたら、グラウンドの端から端まで測ってその中心に杭打ちしますよね。
何が言いたいかというと、
左端と右端がわからなきゃ真ん中にはでけん
ってことです。
でも span はその「端から端」の認識ができないんですよ (´・ω・｀)
なので

インラインに「中央にな〜れ」は効きません

だってこの子は左端と右端がわからないんだもの。
自分がどこに居るかさえわからないんだもの。
当然ながら「右にな〜れ」も無理です。
左については、webの位置関係の基本は左ですから、ほかっとけば勝手に左になります。

そんな困ったちゃんな span に真ん中あるいは右に移動してもらうには、
div に手助けをしてもらいます。
彼は左端がどこで右端がどこなのかわかっていますので、彼が手を引いて彼女を誘導します。
つまり div が span の親になって面倒を見ます。

<div style="text-align: center;">
  <span>あいうえお</span>
</div>

ともかくこの子(span)に直接言ってもダメなので、divの方にお願いするわけです。
「ちょっと悪いけどあの子を中心まで連れてって。」
って (´・ω・｀)
というわけで

インラインに直接位置の指定はできない

と覚えてください。

置換インラインと非置換インライン

ここに辿り着くまでに首をかしげながら、訝しみながらお読み頂いた方も居るかと思います。
「インライン… サイズの指定できることね？？？」
そうなんです。
画像, 動画 など
これらもインラインですが、サイズの指定ってできますよね。

<img src="アドレス" alt="" style="width: 200px; height: auto;">

こうやっていつも当たり前に width/ height の指定をみなさん行ってますよね。

サイズ指定などができる特殊なインラインを 置換インライン と言います

通常のインラインを「非置換インライン」と言います。
「など」というのは width/ height 以外にも 上下左右のmargin(非置換〜は左右marginのみ)、左右上下padding(非置換〜は効いている「ように見える(けどはみ出す)」) が効きます。
代表的な置換インラインは
img, embed, iframe, select など
imgはご存知の通り「画像」です。
embedやiframeは「動画」によく使われます。
これらはサイズの指定ができないと困っちゃいますよね (´・ω・｀)
ほとんどのインライン
span, em, a, strong など
は非置換インラインですのでサイズ指定はできません。
そして置換インラインも非置換インラインも同じく直接の位置指定はできません。

廃止属性 align

最後についでですがこちらの属性について。

<div align="center">
  あいうえお
</div>

text-align とよく似ていますが、text-align はCSSプロパティ、align はhtml属性です。
align属性も廃止ですので使うべきではありませんが、いまだに間違った使い方をされている方の多いこと。

「今日Windows10に変えたのですが、昨日までセンタリングされていたテンプレートが左寄りになってしまいました…。」

これQ&A頻出(笑)

「それはね、残念ながら最初から左に寄ってたんですよ。IEユーザーが知らなかっただけで。」

align属性の代替CSSは text-align なんです。
ということは「ブロックレベル内のインライン」に作用するわけですよね？
この記事内のパターンサンプルで言うと ① です。
全体のブロックは左、中のインラインは真ん中、ってやつ。
ところが古いIEはalign属性の誤解釈があってですね、ブロックも動かしてしまう んです。
ホントはブロックなんか動いちゃダメなんです。
IE10あたりでようやく修正されたんじゃなかったかしら。
あんま覚えてない ←

当時は猫も杓子もIEを使っていましたので、IEのことしか知らないんですよね。
まさか誤解釈だとは思わないわけよ。
ChromeやFirefoxやSafariで閲覧していた方は「ちゃんと」左寄りになってましたよ(ﾆｺ)

だから「ブロック」… それこそテンプレート全体はブロックですので、
ぜーんぶを囲って align に center!
で真ん中に動くと思ってる方がいまだに (´・ω・｀)
動かんからね。それ

またもや随分長くなりましたが、少しは理解の手助けになりましたでしょうか。
えと。大体わかれ :D

初心者向け Instruction CSS トラブル対処 Validation