大div中，三个小div水平居中

最新推荐文章于 2022-10-08 11:04:54 发布

weixin_30739595

最新推荐文章于 2022-10-08 11:04:54 发布

阅读量718

点赞数

原文链接：http://www.cnblogs.com/heyiming/p/9324471.html

版权

 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>