css - 使用 CSS 居中 img

Question

下面是我的 HTML 代码的简化版。我想在不考虑元素 B 的情况下将 img C 置于 div A 的中心。 B 有一个宽度为 70px 的背景图像，C 有一个宽度为 300px 的背景图像。 div A 的宽度是屏幕的 50%。

<div id="A">
   <div id="B"></div><img id="C" src="x.png" />
</div>

我不会放置我的 CSS 代码，因为此时我似乎已经尝试了显示、边距和左侧属性的所有可能组合。我陷入困境并感到沮丧。帮助!

<div id="A">
    <div id="B" onclick="something()" ></div>
    <img id="C" src="x.png" />
</div>

#containsA {
    position: absolute;
    right: 0px;
    top: 0px;
    width: 50%;
    height: 100%;
    background: white;
}

#A {
    position: relative;
    top: 0px;
    width: 100%;
    height: 70px;
}

#B {
    position: relative;
    display: inline;
    background-image: url('some.png');
    height: 70px;
    width: 70px;
    top: 0px;
    float: left;
}

#B:hover {
    cursor: pointer;
    background-image: url('someOther.png');
    height: 70px;
    width: 70px;
}

#C {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    height: 70px;
    width: 300px;
}

Answer 1

以下技术允许在忽略其他元素的同时使元素居中。然而，通过这种方式，元素被从元素的正常流中取出，因此，容器将忽略它:

#A {
    position: relative;
}
#C {
    display: block;
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -150px;
} 

演示:http://jsfiddle.net/wared/p3XKW/ .

这是另一个建议。这一次，我选择将 #B 从流中移除，以防止图像在容器变得太小时遮盖 #B。这样做，#B 仍可点击，但容器会忽略其高度。如果高度从不变化，这可能不是问题:

#A {
    position: relative;
}
#B {
    position: absolute;
}
#C {
    display: block;
    margin: 0 auto;
}

演示:http://jsfiddle.net/wared/dzgLR/ .