使position:fixed的DIV居中

最新推荐文章于 2023-06-06 09:23:46 发布
最新推荐文章于 2023-06-06 09:23:46 发布
阅读量53 收藏
点赞数
文章标签： xhtml javascript ViewUI

先看一下效果：
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>
<br />position:fixed的DIV的居中效果,改变页面的宽度看看。
</div>
</body>
</html>

本文转载自柯乐义： http://www.keleyi.com/a/bjac/326830ffb40fada9.htm

weixin_33809981
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html 固定定位怎么居中,position fixed居中
weixin_30842027的博客
06-09 7884
position:fixed div如何居中据闻是以left right top bottom来定位的，那么剧中是怎么做的上下左右居div{position:fixed;margin:auto;left:0; right:0; top:0; bottom:0;width:200px; height:150px;}一个position：fixed属性的div中的另一个div居中失效我想实现导航栏跟随...
使用position:fixed属性让DIV居中
09-25
下面与大家分享下使用position:fixed属性让DIV居中的关键代码是position:fixed;left:0px;right:0px;width:706px;margin-left:auto;margin-right:auto，感兴趣的朋友可以参考下哈
CSS中position属性之fixed实现div居中
09-03
主要介绍了CSS中position属性之fixed实现div居中的相关资料,需要的朋友可以参考下
position: fixed 居中
leoly612200的博客
04-24 226
例如：<div class="content"></div> .content{ position:fixed; left:50%; top:50%; transform:translate(-50%,-50%); z-index:100; }
css中position:fixed实现div居中上下左右居中
09-25
实现div居中的方法多如牛毛，本例为大家介绍的这个方法是使用css中position:fixed来实现div上下左右居中，这个小技巧比较使用，大家看看
带有position时的居中，包括fixed、relative、absolute
wangweiscsdn的博客
01-04 1052
啥都不说上代码： 居中 .d1 { position: fixed; bottom: 0; left: 0; width: 100%; height: 300px; background-color: green;
css中position:fixed实现div在窗口上下左右居中
09-25
实现div居中的方法有很多，本例介绍的使用css中position:fixed来实现div的上下左右居中，下面以一个DIV 元素在浏览器窗口居中为例
css3 position fixed固定居中问题解决方案
09-25
让此元素位置固定一般会添加position:fixed，但元素就不能居中了，fixed使对象脱离了正常文档流，解决方法如下
在使用position：fixed属性时，如何才能让div居中显示
dayumxhaitang的博客
10-18 1536
作为前端开发人员，很多时候我们会需要让一个div使用position:fixed属性，这个时候有一个棘手的问题是如何在这个时候让div居中显示。我的做法是：给top、right、bottom、left四个值一个0像素，再给margin-top、margin-right、margin-bottom、margin-left四个值auto属性，来让浏览器帮我们计算像素比例，从而达到剧中的目的！！！ 注...
html fixed垂直居中,前端垂直居中的几种简单实现
weixin_39981185的博客
06-20 405
在前端开发尤其是web开发中会经常调整元素位置，所以经常会遇到居中问题，对于水平居中我们都知道用简单的text-align:center;就可以实现，但是对于垂直居中却并不是那么简单实现的，往往需要多条代码合作才能实现其效果。本文简单介绍几种垂直居中的方式，技术不高，水平有限，仅供参考。1. 不知道自己高度和父元素高度时，只要�使用绝对定位就可以实现以下代码没有插图的都是实现的效果相同，如图所示：...
分享html+css实现div居中的8种方法
xiaoweids的博客
06-06 1783
本文主要介绍了html+css实现div居中的8种方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着微点阅读小编来一起学习学习吧。
利用属性position的属性值fixed使div在页面居中（详解）
weixin_46102597的博客
01-30 2429
首先，我们先来了解一下属性position当属性值取fixed时的作用：使对象脱离常规流，使用top，right，bottom，left等属性 以窗口为参考点 进行定位，当出现滚动条时，对象不会随着滚动。** 接下来我们看下面这个关于div的css： div{ position: fixed; left: 50%; top:50%; width: 100px; ...
让元素水平垂直居中的四种方法
AK的博客
08-14 3332
一、使用flex弹性布局 <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>flex</title> </head> <style> *{ margin: 0; padding: 0; } #father{ display: flex; j
关于position:fixed;的居中问题
a6617681的博客
07-21 1325
通常情况下，我们通过操作margin来控制元素居中，代码如下： 1 #name{ 2 maigin：0px auto; 3 } 但当我们把position设置为fixed时，例如： 1 #id{ 2 position:fixed; 3 margin:0px auto; 4 } 以上代码中的margin:0px auto;会出现失效...
使用属性position:fixed的时候如何才能让div居中
热门推荐
干勾鱼的CSDN博客
01-03 4万+
转载请注明出处：http://blog.csdn.net/dongdong9223/article/details/53994537 本文出自【我是干勾鱼的博客】 有的时候我们会需要让一个div使用position:fixed属性，当然什么时候使用这个属性可以参考我的一篇文章《css的position定位属性中值absolute与值fixed二者的区别》。这个时候有一个棘手的问题是如何在这个时
css3 position fixed居中的问题
FE攻城狮
05-30 2万+
通常，我们要让某元素居中，会这样做： #element{ margin:0 auto; } 如果还想让此元素位置固定呢？一般我们会添加position:fixed，如下： #element{ position:fixed; margin:0 auto; } 但是这样做的结果就是，元素不居中了。这说明fixed使对象脱离了正常文档流。 解决方案： #ele
css position: fixed; 垂直居中,绝对定位居中
10-23 1万+
.boxout{ background:#fff; z-index: 111;===display:none; box-shadow: 0 1px 4px #AAA; position: fixed; _position:absolute; /* hack for IE6 */ top: 50%; left: 50%; margin: -201px 0 0 -480px; /* 注意,...
fixed定位——定宽高盒子垂直水平居中
CaseyWei
03-25 1000
1.通过transform实现： <style type="text/css"> .center { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); } </style> 2.通过设置margin实现： <style type="text/css"> .center {
position:fixed 的元素居中显示
JaimeCheng的博客
02-21 2686
标题本身是个很简单是事，因为一般body宽度都是100%； 很久没写html，今天写一个小页面的时候突然遇到了，记录一下； body宽度我设置的是640px，所以有个fixed的元素没居中； position:fixed 生成绝对定位的元素，相对于浏览器窗口进行定位。 让其居中的css： div { position: fixed; margin: auto; ...
position: fixed之后怎么让div居中
最新发布
09-08
在使用position: fixed之后，想要让div居中，可以通过以下步骤实现： 1. 首先，确保div的父元素具有相对定位（position: relative）属性。这是因为，固定定位（position: fixed）元素的定位是相对于最近的具有定位...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值