2

您好，我正在尝试使用 CSS 将 4 个 div 相互垂直和水平对齐，但没有什么对我有用。

请帮我！提前致谢

我的 CSS 请注意，这只是我尝试过的 1 种方法，我已经在这里坐了大约 2 个小时，搞砸了这个，但无法弄清楚。

* {
    margin:0px;
    padding:0px;
}

body {
    background-color:#454545;
}

.wrapper {
    margin:auto;
    width:960px;
}

.circle-wrapper {
    height:918px;
    width:918px;
    background-image:url(images/overlay.png);
    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;
    position:absolute;
    text-align:center;
    margin:auto;
}

.outer-inner-background {
    background-image:url(images/center-circle.GIF);
    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;
    position:relative;
    height:494px;
    width:494px;
    margin:auto;
}

.outer-inner-rings {
    background-image:url(images/inner-outer-rings.PNG);
    background-size:cover;
    background-position:center center;
    position:relative;
    width:494px;
    height:494px;
    margin:auto;
}

.inner-image {
    position:relative;
    height:308px;
    width:308px;
    margin:auto;
}

我的 HTML：我不在乎结构是否改变它只需要工作

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Untitled Document</title>
</head>

<body>
    <div class="wrapper">
        <div class="circle-wrapper">
            <div class="outer-inner-background">
            </div>

            <div class="outer-inner-rings">
            </div>

            <div class="inner-image">
                <img class="inner-img" src="images/inside-image.PNG" width="308px" height="308px">
            </div>
        </div>
    </div>
</body>
</html>
4

4 回答 4

1

这是我的尝试http://dabblet.com/gist/4013306

代码：

css

div {overflow:hidden}
#first {
    background:red;
    width:400px;
    height:400px;
    border-radius:300px;}
#second {
    background:grey;
    height:95%;
    width:95%;
    border-radius:300px;
    margin:2.5%}
#third {
    background:green;
    height:70%;
    width:70%;
    border-radius:200px;
    margin:15%;}
#forth {
    background:black;
    height:95%;
    width:95%;
    border-radius:200px;
    margin:2.5%;}

html

<div id="first">
    <div id="second">
        <div id="third">
            <div id="forth"></div>
        </div>
    </div>
</div>
于 2012-11-04T19:53:00.010 回答
0

尝试position: relative;在容器上使用，并在具有合适和值position: absolute;的圆圈上将它们放在中间。lefttop

于 2012-11-04T19:41:48.767 回答
0

好吧，您可以在内部 div 中使用绝对定位，其中left位置top始终设置为 ( Parent element width- child element width/2)。这是我的代码

html

<div id="red">
    <div id="grey">
        <div id="green">
            <div id="black">
            </div>
        </div>
    </div>
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

CSS

div
{
    border-radius:100%;
}

#red
{
    position:relative; 
    margin-left:auto;
    margin-right:auto; /** centers #red on screen **/
    background-color: #F00;
    width:400px; 
​    height:400px;

}
#grey
{
    background-color:#CCC;
    position:absolute;
    top:20px;
    left:20px;
    width:360px; /** 400 - 360 = 40/2 = 20px for left and top **/
    height:360px;
}

#green
{
    background-color:#0E0;
    position:absolute;
    top:40px;
    left:40px;
    width:280px;
    height:280px;
}
#black
{
    background-color:#000;
    position:absolute;
    left:20px;
    top:20px;
    width:240px;
    height:240px;
}​

这是小提琴：

http://jsfiddle.net/brunovieira/pmN4z/

摆弄 #red 在屏幕上居中：

http://jsfiddle.net/brunovieira/pmN4z/2/

于 2012-11-04T19:48:29.293 回答
0

它需要是4个div吗？尝试这个：

http://jsfiddle.net/vSyWZ/2/

HTML

<div class="outer">
    <div class="inner"><div>
</div>
​

CSS

div{position:relative; margin:0 auto;}
.outer{width: 350px; height: 350px; background-color: gray; border-radius: 100%; border:10px solid red; vertical-align: middle;}
.inner{width: 200px; height: 200px; background-color: black; border-radius: 100%; border:10px solid green; top:60px;}​

我在 Chrome 和 Firefox 上进行了测试并且工作正常，IE 不支持圆角，但它是居中的。

于 2012-11-04T20:48:56.130 回答