- ベストアンサー
スタイルシートのfloatでセンタリングしたい
書籍でfloatを使用したリンクボタンの作り方が下のように紹介されていました。 ３つ並べるボタンの作り方なのですが、これだと左寄せになってしまうため、３つとも並べたまま中央に配置したいのです。 align="center"や<center>では、配置できず、paddingを使えば左があくもののpx指定のため常にセンタリングになりません。 この書籍では左寄せのままで中央へ配置する方法が書かれていないので、みなさんにお教えいただきたいです。 よろしくお願いします。 (IE6.0使用） <body>内 <A href="test001.html">test001</A> <A href="test002.html">test002</A> <A href="test003.html">test003</A> <style type="text/css">内 a{ border:outset #00ffff 4px; background-color:#8fa7ef; color:#ffffff; padding:0.5em; display:block; width:5em; float:left; } a:hover{ border:inset #ccffff 4px; }
- みんなの回答 （6）
- 専門家の回答
質問者が選んだベストアンサー
スタイルシートを書き直しました、float:left; は不必要です、改行されるのはアンカータグの幅を小さく指定しているからです。 タグを改行して書くと、実際には半角のスペースが入り隙間が開きます。画像なども同じように表示されます。 ご存知とは思いますがスタイルシートの center の前にはドット . が必要です。 <head> <title>略</title> <style type="text/css"> <!-- .center{ text-align:center; } a{ border:outset #00ffff 4px; background-color:#8fa7ef; color:#ffffff; padding:0.5em; } a:hover{ border:inset #ccffff 4px; } --> </style> </head> <body> <div class="center"> <A href="test001.html">test001</A><A href="test002.html">test002</A><A href="test003.html">test003</A> </div> </body>
その他の回答 (5)
- rakuson
- ベストアンサー率44% (8/18)
♯５です。私も勉強中ですが、わかる範囲でお答えします。一つのボタンの幅は5em と指定されています。この大きさを px で表すと 70px 位になりました。 高さは文字数とpadding により自動的に決まります。幅を px で指定した場合は幅が固定されます。 280px はIE以外のネットスケープ７で改行されないように指定しました。IE以外のブラウザは padding 等も正確に表示するようです。 それで実際にIEで表示させると中央より少し左側に寄っています。 margin{ width:280px border:red solid 1px; ←この行を追加すると正確な大きさと位置が確認できます。 margin-right:auto; margin-left:auto; }
お礼
とても勉強になりました。 丁寧に説明していただいて、今後の参考に保存しておきたいと思います。（COPYして書籍に折り込んでおきます） また機会がありましたらよろしくお願いします。 ありがとうございました。
- rakuson
- ベストアンサー率44% (8/18)
♯４です。 申し訳ありません。 私のスタイルシートの内容を部分的にコピーしたもので div class="nav" を削除するのを忘れていました。削除をお願いします。
お礼
navの意味を書籍で一生懸命さがしてました。（笑） それと280pxの数字はどこから出すのでしょうか? たとえばこのボタンの大きさを変えたい場合、heightもwidthも出てこないので、文字幅によるautoになっているのでしょうか？
- rakuson
- ベストアンサー率44% (8/18)
♯２です。a要素がブロックレベルになるとはしりませんでした。 スタイルシートの変更をしました。 これでセンタリングしたときに改行されるようでしたら、スタイルシート内の margin の width を変更してください。これでどうでしょうか？ <head> <title>略</title> <style type="text/css"> <!-- .center{ text-align:center; } .margin{ width:280px; margin-right:auto; margin-left:auto; } .clear{ clear:both; } a{ border:outset #00ffff 4px; background-color:#8fa7ef; color:#ffffff; padding:0.5em; display:block; width:5em; float:left; } a:hover{ border:inset #ccffff 4px; } --> </style> </head> <body> <div class="center"> <div class="margin"> <div class="nav"><A href="test001.html">test001</A></div> <div class="nav"><A href="test002.html">test002</A></div> <div class="nav"><A href="test003.html">test003</A></div> </div> </div> <div class="clear"><br></div> </body>
お礼
おかげさまで、こんどはうまくゆきました。 .center{ .margin{ .clear{ の部分の付記ですね。 スタイルシートはまだ勉強をはじめたばかりなので知識には疎いですが、文を解析しながらなお研究してみます。 （記述中classのnavがhead内に出てこないため、まだよくわかっていませんが(^^;） ありがとうごさざいました
縦になるのは 改行されてしまうから nowrapで回避できない？
aタグでfloatは要らない <div style="text-align:center"> <a style="border:outset 4px">test001</a> <a style="border:outset 4px">test002</a> <a style="border:outset 4px">test003</a> </div>
お礼
ありがとうございます。 <style type="text/css"> からfloatをとってご指定のようにしてみましたが、 これだとメニューが縦になってしまいました…。 横に並んだままでのセンタリングにしたいのですが。
お礼
ありがとうございます。 ご指示のようにやってみましたが、ボタンの形が変わってしまうため、 抜けた部分の display:block; width:5em を戻してみました。 widthの方は単なる幅なので、問題はありませんが display:block;を入れるとボタンの形は戻りましたが、 ただこれを入れると縦になってしまいました。 書籍の解説には display:block;はボタンの形にするために displayのプロパティにblockを指定し、a要素をブロックレベルにする必要があると書かれています。 なにやらfloatを使う関係のようです。