大div中，三个小div水平居中
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>大div中，三个小div水平居中</title> 8 <style> 9 *{ 10 margin:0; 11 padding:0; 12 } 13 .big_div{ 14 text-align: center; 15 margin: 0 auto; 16 padding: 0; 17 clear: both; 18 height: auto; 19 border: 1px solid red; 20 } 21 .small1,.small2,.small3{ 22 width: 200px; 23 height: 200px; 24 line-height: 200px; 25 margin: 0; 26 padding: 0; 27 display: inline-block; 28 _display: inline; 29 *display: inline; 30 zoom: 1; 31 background: beige; 32 } 33 </style> 34 </head> 35 <body> 36 <div class="big_div"> 37 <div class="small1"> 38 小div1 39 </div> 40 <div class="small2"> 41 小div2 42 </div> 43 <div class="small3"> 44 小div3 45 </div> 46 <div style="clear:both"></div> 47 </div> 48 </body> 49 </html>
效果图如下：
