html - 在 DIV 中居中对齐图像

Question

虽然之前有人问过这个问题，但我的问题有点不同。我有一个 div，其中有两个图像。第一张图片需要保持左对齐，而第二张图片需要居中对齐。 div 没有固定宽度，所以它覆盖了标题。我创建了一个 fiddle ，可以找到here .

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

Answer 1

案例一

将 text-align:center 添加到 div 类。

使用伪类将 float:left 赋予第一张图片，这样您的第二张图片将与 div 居中对齐，而第一张图片将左对齐。

这是演示 http://jsfiddle.net/Eevpc/5/

案例二

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