首页前端开发HTML使用position:fixed属性让DIV居中

使用position:fixed属性让DIV居中

时间2024-01-24 01:08:02发布访客分类HTML浏览229
导读:收集整理的这篇文章主要介绍了使用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核实处理,我们将尽快回复您,谢谢合作!

fixedposition

若转载请注明出处: 使用position:fixed属性让DIV居中
本文地址: https://pptw.com/jishu/584843.html
DIV实现简易漂浮层放置分页信息思路分享 给div加滚动条 div显示滚动条设置代码

游客 回复需填写必要信息