如何使用position:fixed属性让DIV居中

企鹅博客
企鹅博客
企鹅博客
25193
文章
0
评论
2020年10月5日14:43:14 评论 10 views 1456字阅读4分51秒

下面与大家分享下使用position:fixed属性让div居中的关键代码是position:fixed;left:0px;right:0px;width:706px;margin-left:auto;margin-right:auto,感兴趣的朋友可以参考下哈

关键代码是:#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的p居中-柯乐义</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> 
<p id="topmenu_keleyi_com"> 
<ul><li><a rel="external nofollow" target="_blank" href="https://www.qieseo.com/wp-content/themes/begin/go.php?url=aHR0cDovL3d3dy5rZWxleWkuY29tL21lbnUvbmV0Lw==" target="_blank">.NET</a></li> 
<li><a rel="external nofollow" target="_blank" href="https://www.qieseo.com/wp-content/themes/begin/go.php?url=aHR0cDovL3d3dy5rZWxleWkuY29tL21lbnUvamF2YXNjcmlwdC8=" target="_blank">Javascript</a></li> 
<li><a rel="external nofollow" target="_blank" href="https://www.qieseo.com/wp-content/themes/begin/go.php?url=aHR0cDovL3d3dy5rZWxleWkuY29tL21lbnUvanF1ZXJ5Lw==" target="_blank">jQuery</a></li> 
<li><a rel="external nofollow" target="_blank" href="https://www.qieseo.com/wp-content/themes/begin/go.php?url=aHR0cDovL3d3dy5rZWxleWkuY29tL21lbnUvY3NoYXJwLw==" target="_blank">C#</a></li> 
<li><a rel="external nofollow" target="_blank" href="https://www.qieseo.com/wp-content/themes/begin/go.php?url=aHR0cDovL3d3dy5rZWxleWkuY29tL21lbnUvb3RoZXIv" target="_blank">其他</a></li> 
<li><a rel="external nofollow" target="_blank" href="https://www.qieseo.com/wp-content/themes/begin/go.php?url=aHR0cDovL3d3dy5rZWxleWkuY29tLw==" target="_blank">首页</a></li></ul> 
position:fixed的p的居中效果,改变页面的宽度看看。 
</p> 
</body> 
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!

相关推荐:

对于CSS浮动float和定位position的解析

以上就是如何使用position:fixed属性让DIV居中的详细内容,更多请关注css教程其它相关文章!

继续阅读
css float 属性和position:absolute比较 css教程

css float 属性和position:absolute比较

相信很多人都有这样的问题,在页面布局中float和position:absolute哪个更好用呢?既然是布局,就用float好,这个我比较常用。这个浮动是可以清除的,一般不会影响整体布局。 而posi...
HTML如何实现定位position html教程

HTML如何实现定位position

本文主要为大家分享一篇HTML如何实现定位position的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧。 一、CSS定位(Posotioning)属性允许你对元素进行定位, ...
关于css中的position属性 css教程

关于css中的position属性

position 属性规定元素的定位类型。这个属性定义建立元素布局所用的定位机制。任何元素都可以定位,不过绝对或固定元素会生成一个块级框,而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: