固定浮动定位之fixed

最新推荐文章于 2023-06-16 13:47:56 发布

cangkukuaimanle

最新推荐文章于 2023-06-16 13:47:56 发布

阅读量3.5k

点赞数

分类专栏： html/css/javascript

本文链接：https://blog.csdn.net/cangkukuaimanle/article/details/8695055

版权

html/css/javascript 专栏收录该内容

55 篇文章 0 订阅

订阅专栏

网页中如下图，需要在页面底部中间固定一个块，当然用positon:fixed来控制，然后bottom:0px;能让其在底部，但是在中间怎么处理呢？

最先想到的是用js或者jquery算屏幕的宽度A，然后减去红色框的宽度B，那么它的left值为(A-B)/2 px;

其实有更简单的，只需要css来控制，代码如下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">  
	<head>
		<style>
		.test
		{
			border:1px solid red;
			position:fixed;
			bottom:0px;
			bottom:0px;
			left:0px;
			right:0px;
			margin:auto auto;
			height:50px;
			width:200px;
		}
		</style>
	</head>
<body>
	<div class="test"></div>
</body>
</html>

重要之处就是left:0px;right:0px;margin:auto auto;

经测试在ie8、9、10，chrom、firefox中均正常

cangkukuaimanle

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
固定浮动定位之fixed

网页中如下图，需要在页面底部中间固定一个块，当然用positon:fixed来控制，然后bottom:0px;能让其在底部，但是在中间怎么处理呢？最先想到的是用js或者jquery算屏幕的宽度A，然后减去红色框的宽度B，那么它的left值为(A-B)/2 px;其实有更简单的，只需要css来控制，代码如下 .test { border:1px
复制链接

扫一扫

专栏目录