ブロックレベル要素のセンタリング（CSS編集）
画像や表などを記事の真ん中に配置する（センタリングする）とき、以前では、<center>や<div align="center">を使用するのが当たり前でした。これらの方法は簡単で便利だったのですが、HTML4.01では非推奨、XHTMLでは使用できません。『センタリングはCSSでする』というのが正しい方法になっているようです。
画像や表などを記事の真ん中に配置する方法は大きくわけて２つあります。文字や画像（img）などの※インライン要素は、text-align:center;でセンタリングします。
※インライン要素について詳しくはコチラ→CSS編集をしましょう
.textcenter
{
text-align:center;
}
(センタリングするときは下の通りに入力します。)
<div class="textcenter">センタリングしたい文字や画像</div>
「それぞれは カワイイされる 画像かな」
ポラロイド風の枠など装飾した画像や表などの※ブロックレベル要素は、ブロックレベル要素の幅を決めて、左右のmarginをautoしてセンタリングします。
※ブロックレベル要素について詳しくはコチラ→CSS編集をしましょう
.photocenter
{
margin-left: auto;
margin-right: auto;
width:150px;
}
※ここでは画像の幅130pxの左右にそれぞれ10pxのpaddingを設定
していますから、10+130+10＝150pxをwidthとして設定しました。
(センタリングするときは下の通りに入力します。)
<div class="photocenter">センタリングしたいポラロイド風の枠など装飾した画像や表</div>
この記事をIE6.0でご覧になっている方は、上の画像がセンタリングされていないと思います。これはIE6.0のバグなのだそうです。それでもIE6.0を使用される方が圧倒的に多いですので、IE6.0でもそれ以外のブラウザでも、センタリングできるようにしましょう。上記の設定に加えて、text-align:center;をさらに設定すればＯＫです。特に追加するCSSコードはありません。次のように入力してください。かなり面倒ですが、これでどんなブラウザでもブロックレベル要素のセンタリングが可能となります。yozoもこの方法を使用しています。
(センタリングするときは下の通りに入力します。)
<div class="textcenter"><div class="photocenter">センタリングしたいポラロイド風の枠など装飾した画像や表</div></div>
「この自分 注意したれば 画像かな」
いつもお世話になっている小粋空間のyujiroさんの記事CSSでブロックレベル要素をセンタリングするを見て、はじめて、ブロックレベル要素の正しいセンタリングの方法が理解できました。このyujiroさんの記事と、紹介されている、Web標準普及プロジェクト様の記事ブロックレベル要素をセンタリングする方法を参考にさせていただきました。m(_ _)m
- yozoからのお願い
また、言うまでもないことですが、この記事を参考にされるのでしたら、「CSS編集」は自己責任で行ってください。そして、必ずバックアップを取るようにしてくださいね♪
この記事を参考にされた場合は、結果や感想を、CommentやTrackbackしていただけたら、うれしいです。もちろん、「これではおかしいのでは？」とか「こうしたほうが良い。」というご指摘やご指導もありがたく頂戴したいと思っています。よろしくご協力ください。 m(_ _)m
↓ ぽちっと応援お願いします♪ m(_ _)m
↓yozoの気が向いたと記2.0の関連記事紹介
↓ ぽちっと応援お願いします♪ m(_ _)m
コメント
このセンタリングの件では本当にお世話になりました～。
センタリングなんてただtext-align:center;を入れておけばOKだと
思っていたのですが。(^^;;
インライン要素とブロック要素でやり方が違うだなんて思ってもみませんでした。
きっとこれからいろいろカスタマイズなどをやる上でこういったことは
しょっちゅう起こるんでしょうね。本当に日々勉強しなければいけませんね!!
とっても分かりやすい記事をありがとうございました♪(*- -)(*_ _)ペコリ
Posted by まゆび at 2006.12.06 23:15 | edit
コメント
＞センタリングなんてただtext-align:center;を入れておけばOKだと思っていたのですが。
あはは・・・恥ずかしながらyozoもそう思っていました。ヾ(￣o￣;)ｵｲｵｲ
IE6.0でセンタリングできるのに、どうして他のブラウザではだめなのかよくわかっていませんでしたよ。CSSの本にあるmargin:auto;でもIE6.0はセンタリングできないし・・・yujiroさんの記事で納得だったんですよ。お互いyujiroさんに感謝しなきゃいけませんね。(^○^)
＞本当に日々勉強しなければいけませんね!!
トライ＆エラーでしょうね。カスタマイズを楽しむつもりでのんびりいきましょうか。
できないことでも、どこかで誰かが問題を解決しているかもしれない・・・
Net世界は本当に広いですね。(*ﾟ▽ﾟ)*｡_｡)*ﾟ▽ﾟ)*｡_｡)ｳﾝｳﾝ
追伸：遅まきながら紹介してくださった記事にトラバ入れさせていただきました。m(_ _)m
Posted by まゆびさんへ at 2006.12.07 11:15 | edit
コメント
こんばんわぁo(^-^ o )(ノ ^-^)ノゃぁゃぁ♪
何日か お母さん役してました。
風邪はなかなか 治らないですけど。 (;^_^A アセアセ・・・
いろいろ タグがあるんだよね。
以前HPの頃は 結構 覚えてたけど。
今は手抜きのサイトになってるかなぁ？？？
cssも勉強 しなきゃ・・・ ダメだな σ(*^^*)ミユー♪
少し、時間ができればと思いつつ・・・ 時間があると 背景作ってるからなぁ。
また、お勉強させてもらって、キャプの紹介に使わせてもらいます。
使用報告 どうも、ありがとう (o*。_。)oペコッ
Posted by ☆(。・・。)mew☆*･゜ at 2006.12.07 17:26 | edit
コメント
だんだん寒くなってきましたね。
お元気でお過ごしですか？
待ってました！センタリング！！
さっそく挑戦してみましたよ～♪
yozoさんのわかりやすい説明のおかげで
なんかすんなり出来ちゃってすごーーく嬉しいです。
どうもありがとうございました<(_ _)>
ＴＢもさせていただきました(*^_^*)
また色々なカスタマイズ 楽しみにしていま～す♪
Posted by miyu at 2006.12.07 17:28 | edit
コメント
＞何日か お母さん役してました。風邪はなかなか 治らないですけど。(;^_^A アセアセ・・・
あらら・・・無理しちゃたのですね♪でも、ボールを外すわけにはいかなかったですもんね。
今度は、みんなに心配かけないようにしなきゃいけませんね♪ (*^-^)
＞以前HPの頃は 結構 覚えてたけど。今は手抜きのサイトになってるかなぁ？？？
いえいえ♪ブログの場合は、記事がとっても書きやすいので、気にならなくなっただけだと思いますよ。それに忘れたって調べればすぐに思い出しますもんね (^○^)
＞少し、時間ができればと思いつつ・・・ 時間があると 背景作ってるからなぁ。
ふふふ・・・ブログですからね。その気になったときでいいのだと思いますよ。
楽しむはずがストレスになっちゃうと続かないですもんね。ドンマイ♪
＞また、お勉強させてもらって、キャプの紹介に使わせてもらいます。
ちょっぴり、お役に立てそうで、うれしーですよ♪ (*^-^)
とっても励みになりました。ありがとーございまっす♪m(_ _)m
Posted by σ(*^^*)ミユー♪さんへ at 2006.12.07 18:36 | edit
コメント
＞だんだん寒くなってきましたね。お元気でお過ごしですか？
本当に寒くなりましたね♪miyuさんはお元気ですか？(*^-^)
yozoはおかげ様で元気一杯ですよ。ありがとーございまっす♪ m(_ _)m
＞待ってました！センタリング！！さっそく挑戦してみましたよ～♪
たった今、お邪魔させていただきましたよ。ばっちりセンタリングできていましたね。
ｵﾒﾃﾞﾄｰｺﾞｻﾞｲﾏｯｽ♪(*⌒ｰ⌒)o∠★:ﾟ*PAN!
＞yozoさんのわかりやすい説明のおかげで
＞なんかすんなり出来ちゃってすごーーく嬉しいです。
(*ﾟｰﾟ*)ポッ ありがとーございまっす♪ちょっぴりお役に立ててうれしいですよ。
これからも参考になる記事を書けるように＼(*⌒0⌒)ｂがんばっ♪ しまっす(^○^)
追伸：記事での紹介及びトラバありがとーございまっす♪
こちらからもお返しのトラバさせていただきました。m(_ _)m
Posted by miyuさんへ at 2006.12.07 18:59 | edit
コメント
センタリング助かりました～ありがとうございますm(_ _"m)
先日の件は記事の投稿形態自体を変えなければ解決しないことが分かりました
のんびり解決していきたいと思いますm(_ _"m)
Posted by ウッキ at 2006.12.08 18:34 | edit
コメント
＞センタリング助かりました～ありがとうございますm(_ _"m)
お役に立ててうれしーですよ。こちらこそ、いつも応援ありがとーございまっす♪ m(_ _)m
＞先日の件は記事の投稿形態自体を変えなければ解決しないことが分かりました
＞のんびり解決していきたいと思いますm(_ _"m)
「投稿形態」を変えないと・・・ですか？ご自分の投稿で防ぐことができるのでしたら、なんとかなりそうですね。ラブログ側の投稿時の設定が原因ならどうしようもないかもしれません。
いずれにしても、原因がわかったとのこと。よかったですね。(^○^)
Posted by ウッキさんへ at 2006.12.09 09:28 | edit