css - float:left を使用した css の 3 列のセットアップで、各列内で画像を水平方向に中央揃えにする方法

Question

ここの投稿を見てみましたが、機能する解決策が見つからないようで、float:left タグが問題を引き起こしているかどうか疑問に思っています。

基本的に、私は画像のリストを表示する方法を変更する必要があるために、今すぐ nextgen gallery を使用して設定しようとしている wordpress ブログを持っています。3つのセクションに。各画像を列の中央に配置します。これで、次のコードを使用してこれを設定しました。これは、この非常に基本的な下に 3 つの列を作成しますが、ここでは機能しません。margin:0 auto; を使用できると想定しました。しかし、これは機能しません。

http://jsfiddle.net/locka/dcdkf/

HTML

<div id="wrapper">
<div id="column-left">
<p>LEFT </p>
  <img src="http://t2.gstatic.com/images?q=tbn:ANd9GcQtZTDwx3wVJMqWWTlCW8BDZ7fPvQVbRZpILy0NAeHIGaRxcRtR">
</div>
<div id="column-center">
    <p>MIDDLE </p>
    <img src="http://t3.gstatic.com/images?q=tbn:ANd9GcTCgQRoPbKR8WpHtPZfBiPKK6NaNN3vyWqLarsKDDb0zLWd0AID"></p>
   </div>
<div id="column-right">
    <p>RIGHT </p>
   <img src="http://t0.gstatic.com/images?q=tbn:ANd9GcScF65ryaqzfG9gpVrld1CLJ7_5wJOpmH96FRvB4TvnkFaqyloh">
</div>

CSS

* {
margin: 0;
padding: 0;
}

#wrapper {
width: 980px;
background: silver;
margin: 0 auto;
}

#column-left {
width: 280px;
float: left;
background: red;
}

#column-center {
width: 420px;
float: left;
background: GREEN;
margin: 0 auto;

}

#column-right {
width: 280px;
float: left;
background: BLUE;
}

私は基本的に3つの画像を連続して持つ必要があります.これらは横向きまたは縦向きの2つのサイズで、高さは同じですが幅が異なります.各画像を列の中央に配置する必要があります. 左と右の列は、横向きの写真のように最も広い画像と同じになり、常に左と右が整列しているように見え、ポートレートが列の中央に表示される場合. 次に、中央の列が残りのスペースを占有し、これによりすべての画像が中央に配置されるため、左右の境界線が等しくなります。そしてそれらを整頓します。

画像を中央に配置できない可能性があるため、ネット全体のスタンドウェイのように見える列を設定できます。