主页 / 建站知识 /

使用position:fixed属性让DIV居中

建站知识 2021-07-03 08:43www.168986.cn长沙网站建设
先看一下效果
http://.keleyi./keleyi/phtml/fixedcenter.htm
关键代码是#menu_keleyi_{position:fixed;left:0px;right:0px;width:706px;margin-left:auto;margin-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;margin-left:auto;margin-right:auto;:100px;height:50px;background-color:Red;}
#menu_keleyi_ li{float:left;
list-style:none;
margin-right:1px;
width:116px;
background-color:#e0f0e0;
}
#menu_keleyi_ ul{ margin:0px;padding:0px;}
body{margin: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>
上一篇：h2在div IE7中不垂直居中问题解决方法 下一篇：IE下textarea默认不显示滚动条的实现代码

长沙网站设计

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by