CSS 浮动元素居中

最新推荐文章于 2022-08-31 21:49:22 发布

shaonian1996

最新推荐文章于 2022-08-31 21:49:22 发布

阅读量742

点赞数

分类专栏： html/css

本文链接：https://blog.youkuaiyun.com/qq_41179401/article/details/79330088

版权

html/css 专栏收录该内容

29 篇文章

订阅专栏

浮动元素居中

对于浮动元素无法使用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;
}

图示：