javascript - 在 div 内放置并居中 div

Question

我想实现以下布局。

基本上 1 个 div 放置在另一个 div 内。
Div1 以圆圈作为背景图像。(div 大小不同)
我想定位 Div2，以便我总是得到上面的布局

我尝试使用centering a div inside another ..没用。
我是否必须为 Div2 指定顶部和左侧？
我希望能够定义 Div2 维度 wrt Div1。

任何帮助。

编辑

使用以下样式和js

.circle
        {
            width: 176px;
            height: 176px;
            top: 0;
            left: 0;
            background: url('images/circle.png') no-repeat left top;
            display :block;
        }

.inner {
            position: absolute;
            height: 80px;
            margin: auto;
            overflow :hidden;
            white-space:normal;             
        }

Jquery :

//parent is the container c

    var $circle_div = $("<div>").attr({ id: "circle_" + id });
    $circle_div.addClass("circle");
    parent.append($circle_div);

    $circle_div.css({ "top": 100, "left": 200, position: 'absolute' });
    var $inner_div = $("<div>").attr({ id: "text_" + id });
    $inner_div.addClass("inner");
    $inner_div.html("text_circle_333333333333444444444444" + id);
    $circle_div.append($inner_div);

谢谢大家

Answer 1

不幸的是，凯尔的回答对于将内部 div 垂直居中没有任何作用。

使用 CSS2.1 实现液体垂直对齐几乎是不可能的。考虑到您的约束是外部 div 内部有一个圆圈，即与 div 本身一样高，您需要使用 Javascript 来计算适合圆圈的内部 div 的绝对位置和尺寸。假设您给出了外部的完整尺寸，并为内部 div 指定了给定的高度。

标记

<div id="outer">  
 <div id="inner">&nbsp;</div>
</div>

CSS

#outer { 
  position: relative; 
  width: 100px; 
  height: 100px;
  backgroud-image: blah
}
#inner {
  position: absolute;
  height: 60px;
}

Javascript(假设是 JQuery)

// prepare for semi-intense math
var radius = $('#outer').width()/2;
var height = $('#inner').height();
var d = Math.sqrt(radius*radius - height*height/4);

$('#inner').width(2*d)
    .css('top', (radius - height/2) + 'px')
    .css('left', (radius - d) + 'px');

编辑:说明

我们需要计算inner.left(称之为x)、inner.top(称之为y) 和 inner.width (称之为 w)。这就是这个问题的样子，红色的值就是我们想要的:

需要注意的是，我们所有点的坐标都有一个原点 (0,0)。该圆的半径等于 outer.width/2 (因为该圆与该 div 一样高和长)。因此，在我们的坐标系中，div 和圆的中心位于 (r, r)(r = 半径)。

首先我们可以从图中推导出 y 坐标，因为我们知道高度 h。

y = r - h/2

在图中，我们要寻找的点位于圆上，因此我们使用圆的方程并求解x。因此，给定圆心 (r, r) 和半径 r 的圆方程(记住高中数学):

(x - r)^2 + (y - r)^2 = r^2
(x - r)^2 + (r - h/2 - r)^2 = r^2   --- replacing y
x = r ± sqrt(r^2 - 1/4*h^2)         --- solving for x

这个 x 实际上是两个不同的 x，一个对应于这个 y 坐标上的每个点，并且取决于我们是否在答案中取 + 或 - 平方根。我们需要的是两者中较小的一个。内部 div 的宽度由这两个 x 之间的差值给出。

w = r + sqrt(r^2 - 1/4*h^2) - [r - sqrt(r^2 - 1/4*h^2)]
w = 2*sqrt(r^2 - 1/4*h^2)