- ベストアンサー
フロートしたリストのセンタリング
勉強が足りなくて済みません！教えて下さい。 以下の通り、リストをfloatして横1列に並べたところ、どうしても画面中央に表示することが出来ません。divで囲ってそれをtext-align:center;しても駄目でした。解決策をお教え下さい。宜しくお願いします。 html------------------------------- <ul id="navi_footer"> <li><a href="#">ホーム</a></li> <li><a href="specialroom.htm">客 室</a></li> <li><a href="privatespa.htm">貸切温水プール</a></li> <li><a href="privatespa2.htm">貸切露天風呂</a></li> <li><a href="reservation.htm">客室料金</a></li> <li><a href="ryori.htm">料 理</a></li> <li><a href="kinen.htm">記念日</a>｜</li> <li><a href="interior.htm">インテリア</a></li> <li><a href="gaikan.htm">外 観</a></li> <li><a href="access.htm">アクセス</a></li> <li><a href="info.html">特 典</a></li> </ul><br class="clear"> css------------------------------- ul#navi_footer { text-align: center; margin: auto;} ul#navi_footer li { float: left; list-style-type: none; font-size: x-small;} br.clear { clear: both;}
- prussianblue
- お礼率85% (46/54)
- CSS
- 回答数4
- ありがとう数4
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
> リンクアンカーについては、実際にはhoverを使ってマウスがポイントされるとボタンが凹むようなスタイルを組んだり、画像を当てたりと、 Netscape 7 には a:hover に関するバグがあります。 N7 に気を使うのであればコレは覚えておくといいと思いますよ。 http://www6.atwiki.jp/uriaplus/pages/33.html#ex3 まぁセキュリティ面からいけば「Netscape 8 以上推奨」とどこかに書いておくべきなんですが…。 > また、動作確認も、火狐・ネスケ・オペラ、最近ではIE7ベータも極力確認するようにしています かなり念入りになさっていらっしゃるようですね。コレは失礼をいたしました。 > divの中のリスト(ul)は左揃えのままになってしまい、 たぶん float:left; を指定しているから直接センタリングできないんだと思います。 fliat:left; とインライン要素の意味合いは異なるため、仕方のないことかと…。 それにリストって本来盾に箇条書きするものでしょう？横に並べることはあまり想定されてないと思いますよ。 リストを使うべきかどうかに関しては別の問題となりますが…。
その他の回答 (3)
- passionHey
- ベストアンサー率37% (3/8)
申し訳ありません。質問よく読まずに間違った回答してしまいました。 （削除願い出したので、削除されてるかもしれません。） 多分こんな感じだと思うのですが、どうでしょうか 他のブラウザ今無いので、IEでしか確認してませんが・・・ <html> <head> <style> ul#navi_footer { margin:0px; padding:0px;} ul#navi_footer li { float: left; list-style-type: none; font-size: x-small;} br.clear { clear: both;} </style> </head> <body> <table width="100%"cellspacing="0" cellpadding="0" ><tr><td align="center"> <table border="1" cellspacing="0" cellpadding="0"><tr><td nowrap> <ul id="navi_footer"> <li><a href="#">ホーム</a></li> <li><a href="specialroom.htm">客 室</a></li> <li><a href="privatespa.htm">貸切温水プール</a></li> <li><a href="privatespa2.htm">貸切露天風呂</a></li> <li><a href="reservation.htm">客室料金</a></li> <li><a href="ryori.htm">料 理</a></li> <li><a href="kinen.htm">記念日</a>｜</li> <li><a href="interior.htm">インテリア</a></li> <li><a href="gaikan.htm">外 観</a></li> <li><a href="access.htm">アクセス</a></li> <li><a href="info.html">特 典</a></li> </ul><br class="clear"> </td></tr></table> </td></tr></table> </body> </html>
お礼
ご回答有難う御座います。 本当に不勉強なくせに生意気なことをしようとしていて、申し訳ありません。 考え方としては、tableをデザインに利用する方法は廃する方向でデザインするようにしています。別にW3C至上主義者とかではないのですが、素直にそれが良いと思えた自分の挑戦意識と依頼人との方向性が一致したもので・・・。 一応、リンクアンカー一つ一つに対しwidth値を設定して、その合計値（borderの太さも勘案）をその外のdivのwidth値に設定することで解決致しました。皆様のアドバイスがとても参考になりました。有難う御座いました。
- passionHey
- ベストアンサー率37% (3/8)
目標とするものがイメージできないのですが、 こういうことですか？ <html> <head> </head> <body> <table width="100%"><tr><td align="center"> <table><tr><td> <ul align="left"> <li><a href="#">ホーム</a></li> <li><a href="specialroom.htm">客 室</a></li> <li><a href="privatespa.htm">貸切温水プール</a></li> <li><a href="privatespa2.htm">貸切露天風呂</a></li> <li><a href="reservation.htm">客室料金</a></li> <li><a href="ryori.htm">料 理</a></li> <li><a href="kinen.htm">記念日</a></li> <li><a href="interior.htm">インテリア</a></li> <li><a href="gaikan.htm">外 観</a></li> <li><a href="access.htm">アクセス</a></li> <li><a href="info.html">特 典</a></li> </ul> </td></tr></table> </td></tr></table> </body> </html>
> divで囲ってそれをtext-align:center;しても駄目でした。 div 要素は通常だと幅が 100% になるため、センタリングしても意味がありません。 具体的に幅を指定して初めて意味を持ちます。 ちなみに、div などブロックレベル要素をセンタリングするときは注意が必要です。 http://www6.atwiki.jp/uriaplus/pages/33.html#ex7 それと、リンクアンカーの切れ目がどこだかわかりにくいソースになっていましたが、 これはちゃんと Web サイトとして公開するときにはアンカーの色を互い違いに変えるなど何らかの処置をとってくださいね。 露天風呂客室なんていう風にも読めてしまいますから、混乱させるかもしれません。 意味もなくフェイントみたいになってるページはちょっと見る側も…(^^; それと企業サイトのようですから、最低限ブラウザは Firefox と Opera で動作確認したほうがいいと思います。 最近は Internet Explorer のセキュリティ問題を避けようって言う考えから、 違う原理で動いて IE のセキュリティ問題に影響を受けないブラウザを使う人も増えてきているようです。 http://www.mozilla-japan.org/ http://jp.opera.com/ ブラウザは他に有名どころで Netscape というのもありますが、 日本語最新版はいろいろ問題があって使用は望ましくないし、Firefox と種類が近いですから、 Firefox で対応できていれば無視してもほとんど問題はないでしょう。 http://www6.atwiki.jp/uriaplus/pages/14.html#n7 というわけで、前置きが長くなりましたが、これが修正後のソースです。 ul#navi_footer { text-align: center; margin: auto;} ul#navi_footer li { float: left; list-style-type: none; font-size: x-small;} br.clear { clear: both;} .box_center { width:600px; margin-left:auto; margin-right:auto; } .ie_center { text-align:center; } <div class="ie_center"> <div class="box_center"> <ul id="navi_footer"> <li><a href="#">ホーム</a></li> <li><a href="specialroom.htm">客 室</a></li> <li><a href="privatespa.htm">貸切温水プール</a></li> <li><a href="privatespa2.htm">貸切露天風呂</a></li> <li><a href="reservation.htm">客室料金</a></li> <li><a href="ryori.htm">料 理</a></li> <li><a href="kinen.htm">記念日</a>｜</li> <li><a href="interior.htm">インテリア</a></li> <li><a href="gaikan.htm">外 観</a></li> <li><a href="access.htm">アクセス</a></li> <li><a href="info.html">特 典</a></li> </ul><br class="clear"> </div> </div>
補足
ご回答有難う御座います！なかなか回答が投稿されなくて焦っていました。引き続き自分でも調べているのですが、どうにもうまくいかなくて・・・。 まず、誤解を招き申し訳有りません。長くなる為、明らかに今回の事象に関係無さそうなCSS等は割愛してしまっていました。リンクアンカーについては、実際にはhoverを使ってマウスがポイントされるとボタンが凹むようなスタイルを組んだり、画像を当てたりと、数種類デザインを検討している段階です。また、動作確認も、火狐・ネスケ・オペラ、最近ではIE7ベータも極力確認するようにしています（IE7ベータは違うPCに入れてあるので常にではないですが）。その辺りの話をすっとばしていて、済みませんでした。 早速、お教え頂いたソースをそのままコピペして確認してみたのですが、やはりうまくいきません。自分がdivで試した時もwithは指定していたのですが、やはり結果では、div自体は当然センターに寄るのですが、divの中のリスト(ul)は左揃えのままになってしまい、センタリング出来ません。リストでない要素なら簡単に真ん中にいくのですが・・・（汗）。文章構造を重視してどうしてもリストにしたかったのですが（CSS非対応環境での見栄えもあって）、どうしたものでしょうか？何か、自分はとんでもなくバカな勘違いとかしているのでしょうか。
お礼
バグ情報、とても参考になりました。有難う御座いました。 一応、リンクアンカー一つ一つに対しwidth値を設定して、その合計値（borderの太さも勘案）をその外のdivのwidth値に設定することで解決致しました。皆様のアドバイスがとても参考になりました。有難う御座いました。