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

您的HTML无效，有一个关闭<div>太多了。您可以在text-align:center上使用#A，但这也会影响#B。所以我会这样做：

#A img
{
    display: block;
    margin: auto;
}

http://jsfiddle.net/j93sM/

<强>更新

你使用这个CSS：

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

这几乎没有意义。如果您使用float，则默认情况下元素将变为display: block;。因为我仍然不明白你想要什么，我猜你<img>超过#B。你可以这样做，这个CSS：

 #A img
 {
     display: block;
     margin: -70px auto auto auto;
 }

同样从#C

中删除此内容

~~position: absolute; left: 50%; transform: translateX(-50%);~~

Answer 2

你的解释令人困惑，但纯粹基于抽象元素，这可行：

#a {
  position: relative;
}

#c {
  position: absolute;
  left: 50%;
  top: 50%;
  transform(-50%, -50%);
}

这根本不考虑元素#b，并将#c置于#a中，但我真的不知道它是否是你想要的。确保并始终使用前缀。

Answer 3

以下技术允许在忽略其他元素的同时使元素居中。但是，这种方式将元素从正常的元素流中取出，因此容器会忽略它：

#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/。

Answer 4

我不知道为什么有这个div#C，无论如何尝试这个。希望这是您需要的解决方案。

<强> HTML：

<div id="A">
    <div id="B"></div>
    <img id="C" src="http://lorempixel.com/300/300/" alt=""/>
</div>

<强> CSS：

#A
{
    width:500px;
    height:500px;
    position:relative;
    border:3px solid red;
}

#B
{
    width:70px;
    height:70px;
    background:url(http://lorempixel.com/70/70/) no-repeat;
    border:3px solid blue;
    z-index:2;
}

#C
{
    z-index:1;
    border:3px solid green;
}

#B,#C
{
    display:block;
    position:absolute;
    margin:auto;
    left:0;
    right:0;
    top:0;
    bottom:0;
}

以下是 DEMO

请注意，我仅使用边框进行演示，以分隔元素。

希望这有帮助。

用CSS中心img

4 个答案: