1. 程式人生 > >cangkukuaimanle——你滿了麼

cangkukuaimanle——你滿了麼

網頁中如下圖,需要在頁面底部中間固定一個塊,當然用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中均正常