我想将页面的所有元素(导航,页眉,部分,页脚等)居中,并且仍然保留左侧导航栏.我已经设置了页面本身,但无法弄清楚如何居中.我正在使用浮动：此刻离开,所以我认为这是我的问题,但我不知道如何使布局工作.
这是代码：
header { text-align: center; wIDth: 960px;}nav { line-height: 30px; float: left; padding: 5px; height: 100px; wIDth: 200px;}section { float: left; padding: 5px; wIDth: 800px;}footer { background-color: gray; text-align: center; padding: 5px; wIDth: 960px; clear: both;} <!DOCTYPE HTML><HTML lang="en"><head> <Meta charset="UTF-8"> <Title>Test HTML Page</Title> <link rel="stylesheet" href="style.CSS"></head><body> <header> <h1>heading</h1> </header> <nav> <ul> <li><a href="#">Page 1</a></li> <li><a href="#">Page 2</a></li> <li><a href="#">Page 3</a></li> </ul> </nav> <section> <h2>heading</h2> <p>Lorem ipsum dolor sit amet,consectetur adipiscing elit. Donec est nunc,iaculis in mauris vitae,commodo ullamcorper lacus. Lorem ipsum dolor sit amet,consectetur adipiscing elit. Maecenas posuere in libero ID dictum. Phasellus viverra rutrum mollis.</p> </section> <footer> copyright 2016 </footer></body></HTML>
谢谢你的帮助！
解决方法 您需要在身体上设置宽度并使用边距将其居中：0自动.这会将上/下边距设置为0并自动调整左/右边距以使页面居中.body { wIDth: 960px; margin: 0 auto;} 仅这一点就会弄乱您当前的布局,因为正文的宽度(现在为960px)小于截面和导航元素的总宽度(分别为810px 210px,加起来为1020px).所以你只需要调整它们等于或小于你的身体.不要忘记你的填充增加了你的容器宽度,因此额外的10px.
section { float: left; padding: 5px; wIDth: 740px;}nav { line-height: 30px; float: left; padding: 5px; height: 100px; wIDth: 190px;} Here’s a demo您当前的代码进行了上述调整.
总结以上是内存溢出为你收集整理的如何使用HTML / CSS居中页面布局？全部内容，希望文章能够帮你解决如何使用HTML / CSS居中页面布局？所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）