使用position:fixed属性让DIV居中
导读:收集整理的这篇文章主要介绍了使用position:fixed属性让DIV居中,觉得挺不错的,现在分享给大家,也给大家做个参考。 先看一下效果: http://www.keleyi.COM/keleyi/phtML/fixedcen...
收集整理的这篇文章主要介绍了使用position:fixed属性让DIV居中,觉得挺不错的,现在分享给大家,也给大家做个参考。 先看一下效果: http://www.keleyi.COM/keleyi/phtML/fixedcenter.htm
关键代码是:#topmenu_keleyi_com{ 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://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
html XMlns="http://www.w3.org/1999/xhtml">
head>
title> 使position:fixed的DIV居中-柯乐义/title>
style type="text/css">
#topmenu_keleyi_com{ position:fixed; left:0px; right:0px; width:706px; margin-left:auto; margin-right:auto; top:100px; height:50px; background-color:red; }
#topmenu_keleyi_com li{ float:left;
list-style:none;
margin-right:1px;
width:116px;
background-color:#e0f0e0;
}
#topmenu_keleyi_com ul{ margin:0px; padding:0px; }
body{ margin:0px; }
/style>
/head>
body>
div id="topmenu_keleyi_com">
ul> li> a href="http://www.keleyi.com/menu/net/" target="_blank"> .NET/a> /li>
li> a href="http://www.keleyi.com/menu/javascript/" target="_blank"> Javascript/a> /li>
li> a href="http://www.keleyi.com/menu/jquery/" target="_blank"> jQuery/a> /li>
li> a href="http://www.keleyi.com/menu/csharp/" target="_blank"> C#/a> /li>
li> a href="http://www.keleyi.com/menu/other/" target="_blank"> 其他/a> /li>
li> a href="http://www.keleyi.com/" target="_blank"> 首页/a> /li> /ul>
position:fixed的DIV的居中效果,改变页面的宽度看看。
/div>
/body>
/html>
声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!
若转载请注明出处: 使用position:fixed属性让DIV居中
本文地址: https://pptw.com/jishu/584843.html