人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

Web制作をしています。
bodyタグの内部にtableを配置し、コンテンツはすべてこのtable内に入れてあります。
bodyタグに、CSSでtext-align: centerと指定してあります。
IEではきちんとtableが中央に配置されて表示されるのですが、
Firefoxでは左端に配置されて表示されてしまいます。

Firefoxでも中央に配置されて表示される(最もスマートな、HTMLとCSSの本来の目的にかなった)方法を教えてください。

●質問者: mktg2
●カテゴリ:インターネット ウェブ制作
✍キーワード:BODY CSS firefox HTML IE
○ 状態 :終了
└ 回答数 : 5/5件

▽最新の回答へ

1 ● 《み》
●8ポイント

tableタグにalign="center"という属性を追加してあげてください。

解説ページurlを添付します。

<table> - テーブル(表)

http://www.tohoho-web.com/html/table.htm

◎質問者からの返答

それも試したのですが、解決しません・・・

ちなみに、当該のtableタグの開始タグは下記です。外部CSSも使っています。


2 ● よたか
●7ポイント

tabel{

width:700px;/*任意の幅で*/

div:0 auto;

}

これだけでこないようでしたら、bodyにwidthを指定してください。

body{

text-align: center;

width;100%;

}

あと、htmlの本来の目的にかなった方法をとるのであれば、

tabelでレイアウトするよりも、divで指定したほうがスマートだと思います。

<html>

<body>

コンテンツいろいろ

</body>

</html>

こんな感じでスタイルシートは、こんな感じですね。

body{

text-align: center;

width;100%;

}

#sotowaku{

width:700px;/*任意の幅で*/

div:0 auto;

}

参考に上記要領で私が実際に使っているブログのURLを貼っておきます。

http://blog.hanamarl.com/

http://blog.hanamarl.com/skins/hnmBg/base.css

#bodyが一番外側のdivです。


3 ● 《み》
●13ポイント

下記のサンプルを起こしてみました。IE6とFirefox3でほぼ同じようにセンタリングされるようです。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>table align test</title>
<style type="text/css">
<!--
body { text-align: center; }
table { width: 80%; background-color: #99ffff; }
//-->
</style>
</head>
<body style="">
<div style="">
<table style="">
<tbody>
<tr>
<td>てきすと</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

なので、外部cssに書いてある記述が、なにか邪魔をしているのかもしれませんね。


4 ● pahoo
●36ポイント ベストアンサー

TABLE をセンタリングするのは、ブラウザによってレイアウト・プロパティの継承に違いがあるため、少々厄介です。

以下の環境できちんとセンタリングする CSS の書き方として、

Windows: IE6/7, Firefox, Opera, Safari
MacOS X: Safari, Firefox
Linux: Firefox

下記サイトに紹介されている方法がよいでしょう。


参考書籍

必携 HTML/CSS/JavaScript Webブラウザー互換性辞典 (インプレスの辞典)

必携 HTML/CSS/JavaScript Webブラウザー互換性辞典 (インプレスの辞典)

  • 作者: 佐藤 和人
  • 出版社/メーカー: インプレス
  • メディア: 単行本

◎質問者からの返答

どうも、外部スタイルシートのうち、下記の行が悪さをしているようです。

table { margin: 0px 0px 10px 0px; border: 0px; padding: 0px; border-collapse: collapse; }

どうすればよいでしょう?


5 ● stnet
●36ポイント

table { margin: 0px auto 10px auto; border: 0px; padding: 0px; border-collapse: collapse; }

に変えてみてどうでしょうか?

◎質問者からの返答

基本的には、tableは左寄せで表示されてほしいのです。なので、一番外側のtableのtdはtext-align: leftと指定しています。

しかし、一番外側のtableのtdだけはセンタリングしたいので、別途、

table.tmplt0_outmost { width: 900px; margin: 0px auto 0ps auto; }

と指定しているのですが・・・。

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ