将div放在div中并居中

Question

我想实现以下布局。

基本上是1个div放在另一个内部
Div1的背景图片为圆形。（div的大小不同）
我想定位Div2，以便始终获得上述布局

我尝试在另一个 ..didnt工作中使用div居中 。
我是否必须为Div2指定顶部和左侧？
我希望能够定义Div2尺寸和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

不幸的是，凯尔（Kyle）的答案不会使内部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)

Answer 2

尝试这个：

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


#outer {
    position: absolute;
    width: 100px /*width of image*/;
    height 100px /*height of image*/;
baackground-image: url(path-to-image/img.jpg);
}
#inner {
    position: relative;
    top: 100px /*whatever works*/
    width: 50%; /*or whatever width you want*/
    margin: 0px auto; */centers it horizontally*/ 
}

这会将div #inner精确地放置在外部div的中心。

编辑也垂直定位div，我第一次错过了，对不起！

希望至少有帮助。 :)

Answer 3

绝对位置div2，顶部和左侧相对位置div1。

div1 {position：relative} div2 {position：absolute; 顶部：**像素; 左：** PX}