2

こんにちは、CSS を使用して 4 つの div を互いに垂直方向および水平方向に整列させようとしていますが、何も機能していません。

私を助けてください！前もって感謝します

私のCSS これは私が試した1つの方法に過ぎないことに注意してください.

* {
    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

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 に答える
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 に答える