<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <title>大div中，三个小div水平居中</title>

     <style>

         *{

             margin:0;

             padding:0;

         }

         .big_div{

         text-align: center;

         margin: 0 auto;

         padding: 0;

         clear: both;

         height: auto;

         border: 1px solid red;

     }

     .small1,.small2,.small3{

         width: 200px;

         height: 200px;

         line-height: 200px;

         margin: 0;

         padding: 0;

         display: inline-block;

         _display: inline;

         *display: inline;

         zoom: 1;

         background: beige;

     }

     </style>

 </head>

 <body>

     <div class="big_div">

         <div class="small1">

             小div1

         </div>

         <div class="small2">

             小div2

         </div>

         <div class="small3">

             小div3

         </div>

         <div style="clear:both"></div>

     </div>

 </body>

 </html>

效果图如下：

大div中，三个小div水平居中的更多相关文章

  1. 为什么当多个inline-block的div中，如果有的div没有内容而有的div有内容，有内容的会下沉？

    为什么当多个inline-block的div中,如果有的div没有内容而有的div有内容,有内容的会下沉? 就像这样 两个div高度相同,第二个我写了一个1当作 有内容吧,它就下沉了... 奇怪... ...

  2. 小div在大div中垂直居中，以及div在页面垂直居中

    <html> <head> <title>淘宝 2faner</title> <style type="text/css"&g ...

  3. 一个大div里面包裹一个小div,里面的小div的点击事件不触发外面的这个大div的点击事件

    一开始上html代码 <div id="div1" style="background: blue;width: 100px; height: 100px;&quo ...

  4. 大div套多个小div，怎样设置外div的高度自适应？

    在最后一个div 后面加上 overflow:hidden;如下: <div style="width:580px; height:auto; margin:0 auto; <d ...

  5. div+css 让一个小div在另一个大div里面 垂直居中

    方法1: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 .parent {           width:800px;           height:500px;       ...

  6. DIV中的文字垂直并且水平居中的CSS

    .MsgPopup { height: 100px; line-height: 100px; text-align: center;}

  7. 如何在一个div中使其子div居中

    网上其他地方已讲述过对其的不同实现方式,今天主要做一个详细的汇总,希望对大家有帮助. ps:我面试的时候就被问到过这个问题,当时都回答错了,蓝瘦. 假设父div的类名为father,子div的类名为s ...

  8. ThinkPHP框架下，jq实现在div中添加标签并且div的大小会随之变化

    php初学者,有什么不对的还请指正. 首先是在html页面中用jq实现添加标签:divAchivePersonnal是select所在的div的外层div,divselectAchivePersonn ...

  9. p标签在div中垂直居中，并且div高度随着p标签文字内容的变化而变化

    1.div设置flex布局 div{ display: flex; align-items: center; } 2.div不要设置height,设置min-height

随机推荐

  1. ideal 工具jdk环境配置

    1.File  >>  Other Settings >> Default Project Structure ... 2.Project  >>  jdk_vie ...

  2. 微信点餐系统（七）-微信授权获取openid：

    章节小结: 1.学会了微信授权的步骤,学会了微信授权的文档 2.学会了使用natapp内网穿透工具 3.加深了虚拟机的网络配置以及基本使用 4.学会了抓包购票工具fiddler的使用 5.微信授权步骤 ...

  3. hdu 1166 线段树 区间求和 +单点更新 CD模板

    题目链接 敌兵布阵 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total S ...

  4. [CSP-S模拟测试]:bird（线段树优化DP）

    题目传送门(内部题89) 输入格式 第一行两个数$n$和$k$,分别表示小鸟的只数和$R$装弹时间.接下来$n$行,每行两个数$l,r$表示$n$只小鸟初始时的头和尾的$x$坐标. 输出格式 输出一个 ...

  5. （转）C#进阶之WebAPI

    转:https://www.cnblogs.com/yuchenghao/p/10598825.html 首先第一点:什么是WebAPI? 首先我们了解一下.net framework 的框架构成, ...

  6. 【重点突破】—— UniApp微信小程序开发教程学习Three

    一.实战 HBuilderX:在微信小程序中运行页面,需要设置->安全 开启微信小程序服务端口,HBuilder工具->设置->配置程序路径 网络请求.模板语法.打开页面.页面传参 ...

  7. Python 字符串与列表去重

    最近面试中出现频率比较高的字符串和列表的去重pstr = 'abcadcf'# 字符串去重# 1.使用集合 --没有保持原来的顺序 print(set(pstr)) # 2.使用字典 -- 没有保持原 ...

  8. 二、robotframework接口测试-常用关键字介绍

    1.常用关键字介绍: a. 打印:log                                                  用法:log   打印内容 ---------------- ...

  9. python - MySQLdb 事务处理及批量执行executemany

    MySQL数据库有一个自动提交事务的概念,autocommit.含义是,如果开启autocommit, 则每一个语句执行后会自动提交.即一个语句视为一个事务. 在python使用的MySQLdb中,默 ...

  10. Visual Studio Code - 同步代码时使用 rebase

    打开设置 设置"git.rebaseWhenSync": true