使用position:fixed属性让DIV居中
网站建设 2023-01-28 20:49www.1681989.com免费网站
先看一下效果
http://.keleyi./keleyi/phtml/fixedcenter.htm
关键代码是#menu_keleyi_{position:fixed;left:0px;right:0px;width:706px;marg-left:auto;marg-right:auto;}
附完整代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://.w3./TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://.w3./1999/xhtml">
<head>
<title>使position:fixed的DIV居中-柯乐义</title>
<style type="text/css">
#menu_keleyi_{position:fixed;left:0px;right:0px;width:706px;marg-left:auto;marg-right:auto;:100px;height:50px;background-color:Red;}
#menu_keleyi_ li{float:left;
list-style:none;
marg-right:1px;
width:116px;
background-color:#e0f0e0;
}
#menu_keleyi_ ul{ marg:0px;paddg:0px;}
body{marg:0px;}
</style>
</head>
<body>
<div id="menu_keleyi_">
<ul><li><a href="http://.keleyi./menu//" target="_blank">.NET</a></li>
<li><a href="http://.keleyi./menu/javascript/" target="_blank">Javascript</a></li>
<li><a href="http://.keleyi./menu/jquery/" target="_blank">jQuery</a></li>
<li><a href="http://.keleyi./menu/csharp/" target="_blank">C#</a></li>
<li><a href="http://.keleyi./menu/other/" target="_blank">其他</a></li>
<li><a href="http://.keleyi./" target="_blank">首页</a></li></ul>
position:fixed的DIV的居中效果,改变页面的宽度看看。
</div>
</body>
</html>
http://.keleyi./keleyi/phtml/fixedcenter.htm
关键代码是#menu_keleyi_{position:fixed;left:0px;right:0px;width:706px;marg-left:auto;marg-right:auto;}
附完整代码
复制代码
代码如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://.w3./TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://.w3./1999/xhtml">
<head>
<title>使position:fixed的DIV居中-柯乐义</title>
<style type="text/css">
#menu_keleyi_{position:fixed;left:0px;right:0px;width:706px;marg-left:auto;marg-right:auto;:100px;height:50px;background-color:Red;}
#menu_keleyi_ li{float:left;
list-style:none;
marg-right:1px;
width:116px;
background-color:#e0f0e0;
}
#menu_keleyi_ ul{ marg:0px;paddg:0px;}
body{marg:0px;}
</style>
</head>
<body>
<div id="menu_keleyi_">
<ul><li><a href="http://.keleyi./menu//" target="_blank">.NET</a></li>
<li><a href="http://.keleyi./menu/javascript/" target="_blank">Javascript</a></li>
<li><a href="http://.keleyi./menu/jquery/" target="_blank">jQuery</a></li>
<li><a href="http://.keleyi./menu/csharp/" target="_blank">C#</a></li>
<li><a href="http://.keleyi./menu/other/" target="_blank">其他</a></li>
<li><a href="http://.keleyi./" target="_blank">首页</a></li></ul>
position:fixed的DIV的居中效果,改变页面的宽度看看。
</div>
</body>
</html>