0

我坚持使用我的 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 中定位（和居中）元素有问题的人。

4

3 回答 3

1

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

要.special水平居中，您可以使用CSS-TRICKS 中的技术：居中百分比宽度/高度元素：将其移动到顶部并将宽度的一半移到左侧

.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

于 2013-11-13T10:14:58.837 回答
0

所以你得到了这个结构：

<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; }

而已。

于 2013-11-12T22:25:42.260 回答
0 
.sprite-halo{ background-position: 0 -1700px; width: 78px; height: 12px; background-color:darkgreen; position:absolute; top:0; left:-40px; z-index:-5;}

请使用此代码。我这边工作。

于 2013-11-13T08:08:56.853 回答