Html 将400px宽的div水平居中放置在具有上边距的全宽div内_Html_Css

Html 将400px宽的div水平居中放置在具有上边距的全宽div内

html css

Html 将400px宽的div水平居中放置在具有上边距的全宽div内,html,css,Html,Css,请查看此代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" c

请查看此代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    <!--
    .header {
height: 200px;
background-color: #CCCCCC;
text-align: center;
    }
    .contents {
background-color: #0099FF;
text-align: center;
height: 400px;
    }
    .footer {
    background-color: #993300;
height: 100px;
    }
    .footer .footer-contents {
margin-top: 30px;
margin-right: auto;
margin-bottom: 30px;
margin-left: auto;
width: 700px;
    }
    -->
    </style>
    </head>

    <body>
    <div class="header">Header</div>
    <div class="contents"> Body </div>
    <div class="footer">
    <div class="footer-contents">
    Some contents goes here
    </div>
    </div>


    </body>
    </html>


无标题文件
标题
身体
有些内容放在这里

我看到正文和页脚之间有一个间隙，因为我已经为页脚内容div添加了30px的上边距。为什么我可以将一个div放在另一个具有一些上边距的div中，由于这个边距，当您在浏览器中看到它时，整个页脚div都添加了30px的边距，我可以通过添加填充而不是边距来解决这个问题，但是我想知道，如果我想把一个700px宽的div水平居中放置在一个100%宽的整页div中，并且我想在内部div中添加一些边距，该怎么办。

在“footer”div中添加一些“footer contents”div以外的内容。例如：

<div class='footer'>&nbsp;
    <div class='footer-contents'>
        Some contents goes here
    </div>
</div>


有些内容放在这里

在本例中，我将边距正确应用于内部div

希望这有帮助

鲍勃

谢谢瑞文，这只会起作用吗？我很惊讶，这是唯一的办法吗？