1. 程式人生 > >CSS 浮動元素居中

CSS 浮動元素居中

浮動元素居中

對於浮動元素無法使用margin{0  auto}可在最外層設定一個div,讓寬度等於裡面div寬度之和,這裡並不完全是width之和,如果,裡面含有邊距,要加上邊距。

html:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>浮動元素居中</title>
	<link rel="stylesheet" type="text/css" href="demo.css">
</head>
<body>
	<div id="containter">
		<div id="main_1">1</div>
		<div id='main_2'>2</div>
		<div id="main_3">3</div>
	</div>
</body>
</html>

css:

*{	
	margin: 0 ;              /*初始化*/
	padding: 0;
}
#containter{
	margin:0 auto;
	width: 900px;
	background: red;
}
#main_1{
	float: left;
	background: #333;
	width: 300px;
}
#main_2{
	float: left;
	background: #666;
	width: 300px;
}
#main_3{
	float: left;
	background: #ccc;
	width: 300px;
}

圖示:

原理:只是讓最外面的div居中了。而寬度正好等於裡面div之和,所以,居中外面div的同時,裡面的div也居中了。