Question

我遇到麻烦在中心（水平）对齐我的一个div，另一个在中心（垂直）对齐我的div。

Horizontal div是网站中间部分的包装器（按钮）。

垂直div是按钮之间“Eller”的包装。

Http://wwww.vilduhelst.dk

我已经尝试过使用了 “保证金：0px auto;”财产，完全没有任何结果。

这是我的CSS代码：

body{
background: url(media/pattern.png);
}

.headerdiv{
text-align:center;
margin-top:50px;
width:223px;
height:121px;
background: url(media/logo.png) no-repeat bottom;
margin-left:auto;
margin-right:auto;

}

.topbardiv{
padding-top:60px;
text-align:center;
background: url(media/HeaderDepression_shadow.png) no-repeat bottom;
}

 #buttons{
margin-top:100px;
width:100%;
height:227px;
text-align:center;

}



.buttonscontent{
width:90%;
margin: 0px auto;
}

.reddiv{
float:left;
display:inline;
background: url(media/RedButtonShadow.png) no-repeat bottom;

}

.redbutton{
background: url(media/RedButton.png) no-repeat bottom;
width:387px;
height:227px;
border:none;
display:inline;
margin-bottom:25px;
}


.redbutton:hover{
background: url(media/RedButtonHover.png) no-repeat bottom;
}

.redbutton:active{
background: url(media/RedButtonOnclick.png) no-repeat bottom;
}


.textdiv{
text-align:center;
float:left;
padding-left:30px;
padding-right:30px;
height:200px;
}

.textdivcontent{
background: url(media/Eller.png) no-repeat;
height:95px;
width:129px;

}

.bluediv{
display:inline;
float:left;
background: url(media/RedButtonShadow.png) no-repeat bottom;
}

.bluebutton{
background: url(media/BlueButton.png) no-repeat bottom;
width:387px;
height:227px;
border:none;
display:inline;
margin-bottom:25px;

}

.bluebutton:hover{
background: url(media/BlueButtonHover.png) no-repeat bottom;
}

.bluebutton:active{
background: url(media/BlueButtonOnclick.png) no-repeat bottom;
}


.footerseperation{
padding-top:175px;
text-align:center;
background: url(media/FooterSeperation.png) no-repeat bottom;
}

.copyright{
background: url(media/copyright.png) no-repeat bottom;
margin-left:auto;
margin-right:auto;
width:205px;
height:24px;
}

这是我的HTML代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"     "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html>
<head>
    <title> Hvad vil du helst? - Dilemma</title>
    <link rel="stylesheet" href="style.css" />
</head>

<body>

    <div class="headerdiv">

    </div>

    <div class="topbardiv">

    </div>

        <div id="buttons">

            <div class="buttonscontent">

                <div class="reddiv">
                    <input type="button" class="redbutton" />
                </div>

                <div class="textdiv">
                    <div class="textdivcontent">

                    </div>
                </div>

                <div class="bluediv">
                    <input type="button" class="bluebutton" />
                </div>

            </div>

        </div>

        <div class="footerseperation">

        </div>

        <div class="copyright">
        </div>
</body>
</html>

居中对齐div内的div，以及div内div的div

0 个答案: