CSS中的中心和位置元素

Question

我坚持使用我的HTML / CSS代码，我需要水平居中两个div（A，B），背景图片放在一个绝对定位的div（C）中。

记住这一点：

• 较大div（A）的下边缘需要位于（C）的底部。
• （A）的上边缘需要位于（B）的上边缘。
• （B）需要落后于（A） - 我认为它需要相同的position属性。
• 对（C）div添加的内部div元素的数量不受限制

这是我的小提琴，我设法将（A）div放在（C）http://jsfiddle.net/meridius/DGexR/内。但无论我做什么，我都无法完成剩下的工作。

修改
以下是

的外观

代码预览：
对于工作示例（带背景图片），请参阅上面提到的小提琴。

HTML

<div class="desk">
    <div class="figure">        
        <div class="type sprites-sachy sprite-WKing"></div>
        <div class="special sprites-sachy sprite-halo"></div>
    </div>
</div>

CSS

.desk { /* this class must not be touched */
    position: absolute; 
    top: 129px; 
    left: 202px;    
    border: 1px solid #FF0000; 
    width: 65px;    
    height: 65px;
    padding: 0;
    float: left;
}
.figure {
    bottom: 0;
    left: 50%;
    position: absolute;
}
.type {
    margin-left:-50%;
    z-index:2;
}
.special {
    border: 1px solid #008000;
    z-index:1;
  /*   display:none; uncomment this to see .figurka centered how it is supposed to */
}

---

注：的
我想避免将这个问题视为过于本地化，所以让我首先说明我认为我不是唯一一个在CSS中定位（和居中）元素的人。

Answer 1

当您使用display: none或position: absolute时，.special将从流程中取出，.type正确居中。

要水平居中.special，您可以使用CSS-TRICKS: Centering Percentage Width/Height Elements中的技巧：将其移至顶部，将宽度的一半移至左侧

.special {
    position: absolute;
    top: 0;
    transform: translate(-50%, 0);
}

剩下的唯一项目就是.special移动.type z-index: -1。

查看完整的JSFiddle

由于您知道.sprite-halo的宽度为78px，因此您始终可以使用像素值

.special {
    position: absolute;
    top: 0;
    left: -39px;
}

另见@Bipin Kumar Pal的回答。

JSFiddle

Answer 2

所以你有这个结构：

<div class="desk">
    <div class="figure">
        <div class="type"></div>
        <div class="special"></div>
    </div>
</div>

确保.desk是绝对的或相对的（你做过）。请注意，浮动不会做任何事情。现在我想.type是200px h / 200px w而.special是150px h / 150px w。

.desk { position: absolute; .. }
.desk .figure { position: absolute; width: 200px; height: 200px; bottom: 0; left: 50%; margin-left: -100px; }
.desk .type { position: absolute; z-index: 2; margin-left: -100px; left: 50%; top: 0; }
.desk .special { position: absolute; z-index: 1; margin-left: -75px; left: 50%; top: 0; }

就是这样。

Answer 3

.sprite-halo{ background-position: 0 -1700px; width: 78px; height: 12px; background-color:darkgreen; position:absolute; top:0; left:-40px; z-index:-5;}

请使用此代码。我的工作。