Question

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

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

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宽度的精确中心对齐。

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>

在DIV中居中对齐图像

3 个答案: