- ベストアンサー
ボックス内に並べた幅の不定なliのセンタリング方法
- ulの幅を決め、liを横並びさせる方法について説明します。
- liの幅が不定なボタンをボックス内に並べ、各行でセンタリングさせる方法を解説します。
- さまざまなブラウザに対応するためのセンタリング方法をご紹介します。
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
float: left; なのですから、左寄せになるのは自然であってfloatを使っている限り中央寄せは無理な気がします。 CSSに float: center; のような仕組みがあればいいのでしょうけれど…。 見た目だけを希望通りに見せるなら、inline-blockを使う方法があります。(IE8,Firefox3,Google Chrome2,Opera9で確認) ----- <style type='text/css'> .iblock{ display: inline-block; } .test1{ background-color: #fee; width: 50px;' } .test2{ background-color: #efe; width: 100px;' } .test3{ background-color: #eef; width: 150px;' } </style> </head> <body> <div style='width: 500px; text-align: center;'> <div class='iblock test1'>test</div> <div class='iblock test2'>It is a test.</div> <div class='iblock test3'>inline-block</div> <div class='iblock test1'>test</div> <div class='iblock test2'>It is a test.</div> <div class='iblock test3'>inline-block</div> <div class='iblock test3'>inline-block</div> <div class='iblock test3'>inline-block</div> <div class='iblock test2'>It is a test.</div> <div class='iblock test3'>inline-block</div> <div class='iblock test2'>It is a test.</div> <div class='iblock test3'>inline-block</div> <div class='iblock test1'>test</div> </div> -----
お礼
お返事ありがとうございます。 左寄せをセンタリングしたいというのも考えてみれば矛盾してますね。 左寄せでいこうと思います。