1行で左寄せと右寄せと中央揃えというのはできますでしょうか？

お世話になります。タイトルのとおりCSS等を駆使して
1行で左寄せと右寄せと中央揃えというのはできますでしょうか？

左寄せと右寄せは下記のアドレスのとおりにして出来たのですが、
中央もいれるとずれてしまいます。
http://allabout.co.jp/internet/hpcreate/closeup/ …


よろしくお願い致します。

No.1 ベストアンサー 回答者： cofxcoo 回答日時： 2006/06/16 06:22

1行に3つの情報を、左寄せ・中央・右寄せとの事ですが、以下でいかがでしょうか。

WinIEのみで確認しました。

◎まずはHTML

<div id="title">
<span id="a">aaaa</span>
<span id="c">cccc</span>
bbbb
</div>

◎次にCSS
<!--
div#title{width: 650px;
　　　　　padding: 5px;
　　　　　background-color: #666666;
　　　　　color: #FFFFFF;
　　　　　text-align: center;
　　　　　}
span#a{float: left; }
span#c{float: right; }
-->

上記の方法でid「title」のボックスにa,b,cが一行に表示されます。
span id「a」と「c」にはそれぞれfloat設定を、「b」の情報がcenterにくるよう
div「title」自体にtext-align:centerの設定をしました。

opera、firefox、Mac環境では未確認です。

この回答へのお礼

お返事ありがとうございます。
こちらでも確認できました。
今回はこちらのやり方で実装しようと思います。

お礼日時：2006/06/16 16:34

No.3 回答者： goldfox 回答日時： 2006/06/16 12:19

p#aaa{position:relative;}

span#cent{position:absolute;top:0;left:0;width:100%;text-align:center; }
span#righ{position:absolute;top:0;left:0;width:100%;text-align:right; }

<p id="aaa">
left文
<span id="cent">center文</span>
<span id="righ">right文</span>
</p>

この回答へのお礼

お返事ありがとうございます。
こちらでも確認できました。
ありがとうございました。

お礼日時：2006/06/16 16:36

No.2 回答者： cofxcoo 回答日時： 2006/06/16 06:28

#1です。

何度もすみません。
只今Firefoxとoperaでも確認し、IE同様1行に表示されました。

Mac環境がない為、レイアウト崩れなどがあればどなたかアドバイスお願い致します。
より美しいCSS、HTMLコーディングがあれば是非私も知りたいので
合わせてお願い致します。