html - 在 DIV 中居中对齐图像

Question

虽然这个问题之前被问过，但我的问题有点不同。我有一个 div，其中有两个图像。第一个图像需要保持左对齐，而第二个图像需要居中对齐。div 没有固定宽度，因此它覆盖了标题。我创建了一个小提琴，可以在这里找到。

任何建议都会对我很有帮助。

Answer 1

情况1

添加text-align:center到 div 类。

通过使用伪类给float:left第一个图像，以便您的第二个图像将与 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 中，第二张图片是 div 剩余宽度的中心（忽略第一张图片占用的空间）。

在情况 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>