html - DIV 内の画像を中央揃え

Question

この質問は以前に尋ねられましたが、私の問題は少し異なります。div があり、その中に 2 つの画像があります。最初の画像は左揃えにする必要があり、2 番目の画像は中央揃えにする必要があります。div の幅は固定されていないため、見出しをカバーします。ここにあるフィドルを作成しました。

どんな提案も私にとって非常に役に立ちます。

Answer 1

ケース1

text-align:centerdiv クラスに追加します。

疑似float:leftクラスを使用して最初の画像を指定し、2 番目の画像が div の中央に配置され、最初の画像が左揃えになるようにします。

ここにデモhttp://jsfiddle.net/Eevpc/5/があります

ケース 2

によってそれを行うposition:absolute

.brandLogo {
    margin: 15px; background-color:red; text-align:center; position:relative;
}   

a img:first-child {
    border: 0 none; position: absolute; left:0;
    height: auto;
    vertical-align: middle;
}
img {
    border: 0 none; margin:0 auto !important;
    height: auto;
    vertical-align: middle;
}

デモhttp://jsfiddle.net/Eevpc/11/

ケース 1 では、2 番目の画像が div の残りの幅の中央になります (最初の画像が占めるスペースは無視されます)。

ケース 2 では、2 番目の画像が元の div 幅の正確な中央に配置されます。</p>

Answer 2

これがうまくいくことを願っています。

.div_class{
   display: block;
   margin-left: auto;
   margin-right: auto;
}

ありがとう

Answer 3

これを試して：

<div id="main" style="text-align:center; width:100%;">
  <div id="left" style="float:left;">
    <img src="..." alt="..."/>
  </div>
  <div id="right" style="float:right; width:100%; text-align:center;">
    <img src="..." alt="..." style="margin:0 auto;" />
  </div>
  <div style="clear:both; content:'.'; display:none" />
</div>