如何让内容屏幕居中显示!

ly5038814 2008-03-05 11:50:08

<html>
<head>
<style type="text/css">
*{
margin:0px;
padding:0px;
}
body{
margin:0px auto;
width:760px;
height:auto;
font-size:12px;
font-family: Arial, Helvetica, sans-serif;
}
#header{
width:760px;
float:left;
margin:0px 0px 3px 0px;
background-image:url(http://www.jzxue.com/Files/ad/firefox-banner.jpg);
background-repeat:no-repeat;
height:60px;
}
#nav,ul{
width:760px;
margin:0px;
height: 15px;
font-size: 14px;
list-style-type: none;
}
#nav li{
float:left;
}
#nav li a{
width:60px;
height:15px;
background-color:red;
text-decoration:none;
text-align:center;
margin:2px 2px 2px 2px;
}
#nav li a:hover{
background-color:yellow;
}
#content {
height:auto;
width: 740px;
line-height: 1.5em;
padding: 10px;
}
#content p {
text-indent: 2em;
}
#content h5 {
font-size: 16px;
margin: 10px;
}
</style>
</head>
<body>
<div id="header"></div>
<div id="nav">
<ul >
<li><a href="#">首页</a></li>
<li><a href="#">文章</a></li>
<li><a href="#">相册</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">论坛</a></li>
<li><a href="#">帮助</a></li>
</ul>
</div>
<div id="content">
<h5>前言</h5> /**********************这个前言为啥与导航在一行呢*******************/
<p>第一段内容</p>
<h5>理解CSS盒子模式</h5>
<p>第二段内容</p>
</div>
<div id="footer">
<div id="footer">
<p>关于华升 | 广告服务 | 华升招聘 | 客服中心 | Q Q留言 | 网站管理 | 会员登录 | 购物车</p>
<p>Copyright 2006 - 2008 Tang Guohui. All Rights Reserved</p>
</div>
</body>
</html>

...全文

477 7 打赏收藏转发到动态举报

写回复

用AI写文章

7 条回复

切换为时间正序

请发表友善的回复…

发表回复

ly5038814 2008-03-07

打赏
举报

谢谢各位了,谢谢了!

jysh321 2008-03-07

打赏
举报

顶楼上的

ly5038814 2008-03-06

打赏
举报

left: 50%; 这个是什么意思了
margin-left: -200px; /* 400的一半 */ 这个为啥是400的一半

为什么内容到最下面了!!

我想整个页面居中,不知能不,谢谢了!!

且按下面格式

1 header 头
2 nav 导航
3 content 内容
4 footer 脚

zhiin1 2008-03-06

打赏
举报



<style type="text/css">

.content {

	width: 400px;

	height: 200px;

	background: #f00;



	position: absolute;

	left: 50%;

	top: 50%;

	margin-left: -200px; /* 400的一半 */

	margin-top: -100px; /* 200的一半 */

}

</style>



<div class="content">.......</div>

liefdiy 2008-03-06

打赏
举报

[Quote=引用 1 楼 zhiin 的回复:]

<style type="text/css">
.content {
width: 400px;
height: 200px;
background: #f00;

position: absolute;
left: 50%;
top: 50%;
margin-left: -200px; /* 400的一半 */
margin-top: -100px; /* 200的一半 */
}
</style>
</head>
<body>

你可以自己在纸上画一画，这是剧中的比较好的办法了，没有hack，在许多浏览器上都不会出现问题。
设置content距左端的距离为50%页面的宽度，然后又用margin-left让它跟最左边相隔负二分之content的宽度，正好就居了，你在纸上画两下就全明白了。

<div class="content"> ....... </div>
[/Quote]

ly5038814 2008-03-06