0

我有一个 div 填充了所有的宽度和一定的高度,然后我有一个较小的圆圈,它需要在这个 div 的底部/中心的一半,在它之后的一半。

一切正常,直到我获得更高的高度或尝试缩放它,然后圆圈将垂直移动,不再是 50/50。此外,缩放页面将使圆圈从顶部扩展,而不是从中间扩展。

jsFiddle

    <div id="rectangle">
        <img id="circle" src="http://alloutput.com/wp-content/uploads/2013/11/black-circle-mask-to-fill-compass-outline.png">
    </div>

CSS:

body {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
}
#rectangle {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 92%;
    background: #E5E5E5;
}
#circle {
    position: absolute;
    top: 86%;
    left: 0;
    right: 0;
    width: 100px;
    margin-right: auto;
    margin-left: auto;
}
4

1 回答 1

0

由于圆形在矩形内,因此它的位置是相对于矩形的。这意味着您需要将 circlebottom属性设置为圆半径的一半:

body {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
}
#rectangle {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 92%;
    background: #E5E5E5;
}
#circle {
    position: absolute;
    bottom: -50px;
    left: 0;
    right: 0;
    width: 100px;
    height: 100px;
    margin-right: auto;
    margin-left: auto;
    background: none #000;
    border-radius: 50%;
}
<div id="rectangle">
    <div id="circle"></div>
</div>

我使用 html 元素创建了一个圆圈,而不是您提供的图像(您可以删除它)。

于 2015-06-15T21:25:06.577 回答