3つのアイテムをページ全体にどのように水平に配布するのですか？

Question

私はこれを行う簡単な方法がなければならないことを知っているが、私の人生のために私はそれを把握することはできません。

私は流体の中心の列を持つ3列のレイアウトを持っています。私は、3つの画像を中央のdivに均等に分配する必要があります。中央の画像は常に中央の列の中央にありますつまりページの中央）、左のイメージは左揃えになり、右のイメージは右揃えになります。

このページでは、フレームワークとしてfaux absolute positioning demoのストリップダウンバージョンが使用されていますが、問題はありませんが、必要なのは、これらの3つのオブジェクトを中央のdiv（列）内に配置する自己完結型の方法です。

私はそれらを未分類リストに入れようとしましたが、要素を左に浮かべると、それらは左に浮かび、もはやdivに中央揃えされません。

私もulなしでやってみたが、それまで失敗してしまった。

ここにご協力いただけると助かります。

Answer 1

のは、これはあなたのマークアップであるとしましょう：

<div class="wrapper"> 
    <img class="first"> 
    <img class="second"> 
    <img class="third"> 
</div> 

これを達成するための多くの方法がここにありますが、画像の既知の幅を使用して一つの方法は次のとおりです。

img { 
    width:100px; 
    display:block; 
} 
.first { 
    float:left; 
} 
.second { 
    float:right; 
} 
.third { 
    margin:0 auto; 
} 

はデモ：http://jsfiddle.net/wY6AS/

ここに絶対位置付けと既知の幅の別の方法があります：

.wrapper { 
    padding:10px; 
    position:relative; 
} 

img { 
    width:100px; 
    height:100px; 
    display:block; 
} 
.first { 
    position:absolute; 
    top:10px; 
    left:10px; 
} 
.third{ 
    position:absolute; 
    top:10px; 
    right:10px; 
} 
.second { 
    margin:0 auto; 
} 

デモ：http://jsfiddle.net/wY6AS/1/

私はより多くのデモを行い、より良い説明を与えることがしたいが、私は実行するようになってきました。既知の幅は簡単ですが、それでも未知の幅ではそれほど難しいことではありません。例えば、浮動小数点や絶対位置と組み合わせて親要素にdisplay:inline-blockとtext-align:centerを使用します。

私はテーブルを提案したくありませんが、あなたが本当に必死で、別の方法を働かせることができない場合は、それもオプションです。表の動作をエミュレートするCSS displayのプロパティも確認してください。

Answer 2

それはあなたが中心とコンテナの幅だのdivの数に依存しない原因この1つ​​は、優れている：http://www.impressivewebs.com/demo-files/center-divs/sivewebs.com/demo-files/center-divs/