CSS 浮動元素居中
阿新 • • 發佈：2019-01-06
浮動元素居中
對於浮動元素無法使用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也居中了。