- 締切済み
ＩＥでCSSを用いてテーブルをセンタリングしたい。
という質問内容なのですが・・・ 条件は、 Windows 3.1/NT3.51 IE4～IE5 Win32 IE4～IE5.0x でCSSだけを用いてセンタリングしたいのですが どうしてもうまくいかないのです・・・ IE用では <DIV style="text-align: center"> CSS準拠では <TABLE style="margin-left: auto; margin-left: right"> があります・・・ 上記は、IE5.5、IE6、ネスケ６、７、もじら、Opera６，７で 確認してます。 CSSのみの利用なので、<CENTER>、<DIV align="center">は使わない方法で 知ってる方はいらっしゃいませんか？
- nanakochi123456
- お礼率13% (3/22)
- HTML
- 回答数5
- ありがとう数0
- みんなの回答 （5）
- 専門家の回答
みんなの回答
補足読みました。 テーブルをセンタリングさせる部分のソースがわからないので、なんともいえないところはありますが… センタリングさせようとしているテーブルの親ボックスに幅の指定が入っているケースでは、センタリングがうまく機能しないケースもあるかもしれません。 センタリングは親ボックスの幅に対しての中央位置に配置をするので、親ボックスの幅次第でウィンドウ中央にこないこともあります。 他に、親ボックスの表示位置を移動させるような位置指定がある場合も同様です。 ソースの面でこういったことがなければ(ご質問・補足の内容から察する分には、今回のケースではそういったことはおそらくないと思いますが)、あとはブラウザや環境に依存する要素が強いと思います。 IEの場合、細かなバージョンの違いでCSSの実装に若干の違いがあるようです。 ソースの面で原因が特定できない場合には、ブラウザを疑ってかかるのが良いのではないかと思います。 ブラウザの実装を疑ってしまうと、CSSでのレイアウトの共通性を追及する上では限界があるかもしれませんね。 どうしてもうまくいかない場合は、左右のマージンとテーブルの幅を合計で100%になるようにそれぞれスタイルシートで決めてしまう強引な方法も取れるかもしれませんが… これもやはりブラウザのレンダリングの癖の影響を受けてセンタリングにならないケースがあるので完全とはいえないですね… このケースでは#4の方の回答にもありますが、一つ一つの環境での反映に差異があることを承知の上で、もっとも共通性が高くなるように、親ボックスのtext-align: center;と、テーブルのmargin: auto;を両方記述して、それで対処するのが良いのではないかと思います。 なお、#4の方の回答にある内容の補足ですが、IE6には旧来のIE5.x以前のスタイルシートの解釈の仕方を適用する「互換モード」と、W3Cの勧告の内容に近い解釈をする「標準モード」があり、HTMLファイルの書き方によってこのモードが切り替わります。 HTMLファイルの先頭のDOCTYPE宣言がシステム識別子まで省略せずに記述されている場合、IE6は標準モードに変わります。 これはDOCTYPEスウィッチという仕様です。 このモードが変わると、レイアウト時に各要素の幅の取得方法が変わったり、数値以外で指定しているフォントサイズが変わったりと、スタイルシートの解釈も変わったりします。 ちなみに、Netscape6以降やOpera7にも、同様のモード変換があるようです。 (ついでですが、前回のアドバイスでtdに親要素のtext-alignは継承しないと書きましたが、これはIEの互換モードでのことでした。 他のブラウザや標準モードでは継承されます。 失礼しました。) あまり的を射た話ではないかもしれませんが… 失礼しました。
- taba
- ベストアンサー率61% (349/567)
CSSの実装は、ブラウザによって違いますので、その対象となるブラウザで実際に試してみないと何ともいえません。うまくすべてに対応されられるかどうか、私には答えられません。参考URLなどを見て、研究してみてください。 基本的には、質問でお書きになっている両方を組み合わせるしかないと思います。 ちなみに、正しい書き方はmargin左右をautoにする方法です。text-alignは正しくCSSを解釈するブラウザでは無効になります。 IE6では、ヘッダの記述によって標準モードと互換モードがあり、動作が変わりますので注意してください。
補足
最初のヘッダは、下記を使っています。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> また、もともとですがIE用とNetscape&Mozilla、OperaでCSSを振り分けるようにして IEだけtext-alignだけを、後者２つは marginをautoだけをやっています。 Netscape4.7、Opera7では問題なくできています。 IE4、Netscape4.0x以下、Opera6以下、その他のブラウザでは CSSを全く読まないようにしてます。（黒文字まっしろけ画面）
解決法としては、IEの旧来のスタイルシートの解釈では上位要素のtext-alignでテーブルの位置を左右する仕様になっていますので、上位要素でtext-align: center;を指定してやればよいでしょう。 先にも挙げられていますが、 <div style="text-align: center;"> <table>～</table> </div> こうすれば良いと思いますよ。 この場合、テキストアラインで内容のすべてがセンタリングされるように見えますが、テーブルの中のtd要素にはこのスタイル指定は継承されませんので、div要素内にテーブルだけを入れているのであれば、他に余計なところがセンタリングされてしまうということもないでしょう。 仮にセンタリングがtd要素に継承されたとしても、その場合はヘッド内でtd要素すべてにtext-align: left;を指定すれば解決できるはずです。 参考まで。
補足
皆さんのサンプルは単体では動作したのですが 実際のドキュメントですと、やはりどうしてもセンタリングできないです。 原因をずっと調べているのですが、どうやら環境依存のようです。 私のあるPC(WinXP IE6ほぼ最新）センタリングする 私のあるPC(WinNT4 IE5.01+IE4互換） センタリングせず(両方とも） 私のあるPC(Win2000 IE5.01 ほぼ最新) センタリングせず 私のあるPC(vmware上のWIn2000、IE5初期のまま) センタリングする 私のあるPC(WinNT3.51 IE4 16bit) センタリングせず 友人のあるPC(Win2000 IE5.01) センタリングする 友人のあるPC（Win98 IE4初期？) センタリングする 友人のあるPC(WinME IE5.5) センタリングしない 友人のあるPC(Win95 IE5.01) センタリングする ちなみに、tableの中で使用しているタグは <h2></h2> <h2 class="xxxx"></h2> <a href=...> <table><tr><td>～</td></tr></table> <div class="xxxx"> <ul class="xxxx"> <li class="大量のクラス名"> </ul> class=xxxで指定されているスタイルシートは border:xxx; font-size:xxx; margin:x,x,x,x; padding:x,x,x,x; background-color: transparent; text-align: center; position: relative; top:-xxx; left:xxx; list-style-image:url(画像); float: left; ＃順不同すみません tableのalign-center の継承は阻止しています。
- itomizu
- ベストアンサー率47% (8/17)
<table>～</table>を<div style="text-align:center;">～</div>で囲む方法は？
- 387
- ベストアンサー率66% (40/60)
CSSでのセンタリングはご存知の通り style="text-align:center" で指定しますが、テーブルタグで指定するとテーブルの各セルに対して センタリングが適用されますよね。 なので私は一時期、左右のマージンを %で指定してセンタリングしていましたが それではテーブルの幅を固定できなくて悩んでいました。 解決してみればなんでもないのですが、テーブルの上位要素でセンタリング 指定すればいいのです。 <body style="text-align:center"> <table ・・・> ・ ・ ・ </table> </body> ただ、こうするとページの本文も全てセンタリングされてしまいますので、 本文は何らかのタグで括って左揃えなり何なり指定しなくてはなりません。 <p style="text-align:left">・・・</p> <div style="text-align:left">・・・</div> <span style="text-align:left">・・・</span> etc.
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/images/related_qa/c205_1_thumbnail_img_sm.png)
補足
ヘッダ等につきましては、＃４に書きました。 その他、<td width=xxx>という記述がまだ残っているので そのあたりも検討しながら CSSコメントアウト大作戦？でもしてみます。 しかし、ほんとIEは困ったちゃんです。汗 いろいろなバージョンを入手するにも、入手できないし あったとしても同時インストールはできないし。。。 （vmwareあればできるんですが、その為にOS沢山いれるのも・・・） Mozillaはいろいろ沢山バージョン集めたのですが OSが変わらない限り、あまり表示がかわらないみたいです。 さすがに、UNIX（Xサーバー＝Windows)のMozillaですと 大幅にかわりますが・・・