IE5.5 で margin:auto と同様の表示をしたい

[新着] Webテンプレートを仮オープンしました

0   名前： NullPo ： 2007/01/19（金） 17:36  ID:Z0FHbpib sub-ii
ブロック要素を真中寄せにしようと、スタイルシートを使ってmargin:autoを指定しました。
ところが、IE5.5で確認すると、適用されていません。

center要素を使うことも考えましたが、配下のテキスト要素なども真中寄せされてしまいます。(<div align="center">も同様の表示でした。)
確認したところ、table要素なら同様の表示が行えるようなのですが、table要素をレイアウトに使用することにバッシングされるのが嫌なのでできれば使いたくありません。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>
<meta http-equiv="Content-Style-Type" content="text/css">
<title>non-title</title>
</head>
<body>

<div style="width:720px; margin:auto; border-style:solid; border-width:1px;">
 abcdef
</div>

<table style="margin:auto;" align="center">
 <tr>
  <td>
   <div style="width:720px; border-style:solid; border-width:1px;">
    abcdef
   </div>
  </td>
 </tr>
</table>

</body>
</html>

*borderは確認用です。

みなさまのお知恵を貸してください。
なお、IE5.5を切り捨てることはできません。
1   名前： カヅサツ ◆ThCi95HEzw ： 2007/01/19（金） 17:36  ［URL］  ID:O5hEMlpW sub-r2
たぶん、これでイケルとおもいますが、すいません、確認できません。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>
<meta http-equiv="Content-Style-Type" content="text/css">
<title>non-title</title>
</head>
<body>

<div style="width:720px; margin:auto; border-style:solid; border-width:1px;">
 abcdef
</div>

<div style="text-align:center">
	<table style="margin:auto;">
	 <tr>
	  <td style="text-align:left;">
	   <div style="width:720px; border-style:solid; border-width:1px;">
	    abcdef
	   </div>
	  </td>
	 </tr>
	</table>
</div>

</body>
</html>

2   名前： くいん ： 2007/01/19（金） 17:36  ID:rbRHv8MX sub-Ds
>>0
この例にあげられたソースの、上のdivを下のtable内のdivのようにセンタリングして見せたい、という意味でしょうか？
↓こういう事かな？
http://www.tagindex.com/hp_guide/css_layout1/02.html#t03
3   名前： NullPo ： 2007/01/19（金） 17:36  ID:Z0FHbpib sub-ii
>>1
カヅサツさん、返信ありがとうございます。
確かにそれでいけました。
IEでも、td要素のtext-alignはブロック要素には影響しないんですね。
勉強になりました。



IE5.5で中央表示するには、table要素を使う以外方法がないのでしょうか。

よろしくお願いします。
4   名前： NullPo ： 2007/01/19（金） 17:36  ID:Z0FHbpib sub-ii
>>0の下のテーブル要素はできるだけ使いたくないけど、これで出来ることは確認した、という意味です。


>>2
くいんさん、返信ありがとうございます。

あぁなるほど、これは見落としてました。
配下要素を全て真中寄せにしたあと、直下の要素で左寄せに戻すんですね。
確かにこれでもいけますね。

要素自体を中央寄せするか、直下の要素のみを中央寄せしたかったのですが、そういう方法はないでしょうか。
5   名前： くいん ： 2007/01/19（金） 17:36  ID:rbRHv8MX sub-Ds
>>4
要素自体を中央寄せの方は理解しました。
直下の要素のみを中央寄せ、というのはどういう意味でしょう？
中の文章まで中央寄せにしてしまうのをどうにかしたい、という事であっていますか？

今のところ私の知識ではtext-alignでdivを中央寄せした場合、
中身だけ左寄せに戻したい場合は戻したいdiv個別にtext-align:leftを設定する方法しか思いつきません。
もしくは…中身が文章のみならpで囲って左寄せ、でしょうか。
個別に設定しなければいけないdivがたくさんあるから、という事であればclass等を利用すると良いと思います。
ただ、div単体による指定だけでdiv要素を中央寄せし、なおかつ文章だけ左寄せのままにする方法はわかりませんので他の方のレスを待ってみてください。

↓結局中央寄せされたものを左寄せに戻す作業なので求められている物とは違いますよね…
body{text-align:center;}

<div style="width:720px; margin:auto; border-style:solid; border-width:1px;">
<p style="text-align:left;">
 abcdef
</p>
</div>
6   名前： K+S ： 2007/01/19（金） 17:36  ID:nROqylMa sub-YS
>>0
>>4

ブロック要素の横に関するレンタリングは、そのブロック要素に対して、
margin-right:auto; /* 左寄せ */
margin:auto; /* 中央寄せ 上下マージンは無関係 */
margin-left:auto; /* 右寄せ */
と指定します。

ただし、特定のIEではこれでは実現しません。
特定のIEは text-align プロパティがブロック要素までに作用します。

特定のIEでブロック要素をレンタリング（センタリング）するには、
<div style="text-align:center">
        <div style="text-align:left; margin:auto">
                内容
        </div>
</div>
が定石です。
※センタリングする要素自体の横幅は省略していますが。

> 配下要素を全て真中寄せにしたあと、直下の要素で左寄せに戻すんですね。
> 確かにこれでもいけますね。
これが最善であると考えられます。

> 要素自体を中央寄せするか、直下の要素のみを中央寄せしたかったのですが、そういう方法はないでしょうか。
特定のIEで実現することを考えると、
前者は、<center style="text-align:left">で恐らく実現可能。
後者は、子セレクタが解釈できない以上、不可能です。

後者に関しては、<element class="box">に対して、
.box {text-align:center}
.box * {text-align:left}
で間接的に実現可能です。
尤も、これが先に示した定石と一致するのですが。
7   名前： NullPo ： 2007/01/19（金） 17:36  ID:Z0FHbpib sub-ii
>>5
>>6
くいんさん、K+Sさん、返信ありがとうございます。

.box {text-align:center}
.box * {text-align:left}

これ、すばらしいですね。
試してみたところ、ばっちりでした。
全く思いつきませんでした。ありがとうございます。


/*
実はtable要素にalign属性追加するだけでは仕様を満たしていませんでした。*/



みなさまありがとうございました。
8   名前： NullPo ： 2007/01/19（金） 17:36  ID:Z0FHbpib sub-ii
追記
>>7の方法では input type="button" まで左寄せになりました。；
input要素を指定するとtype="text"まで真中寄せになるのは目に見えているし、属性を指定することも出来ないし、直接の子要素も指定できない。

center要素も試してみました。
ブロック要素だったんですね、これ。
center要素に対して大きさを指定するのは初めてです。

これはうまくいくかと思ったんですが、あたりまえですけど、大きさが決まらないとダメですね。；
table要素がうまくいきませんでした。

全称セレクタではなく、要素を限定して書いてみます。

雑文失礼しました。
一覧へ戻る