<!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. 实战build-react（三）+ style-components

    npm install --save style-components https://www.jianshu.com/p/27788be90605(copy) "axios": ...

  2. JPA学习（三、JPA_API）

    框架学习之JPA(三) JPA是Java Persistence API的简称,中文名Java持久层API,是JDK 5.0注解或XML描述对象-关系表的映射关系,并将运行期的实体对象持久化到数据库中 ...

  3. 配置：Uri

    URI是网络资源的定义,代表了要操作的数据,Uri主要包含了两部分信息: 1>需要操作的ContentProvider  2>对ContentProvider中的什么数据进行操作   一个 ...

  4. Oracle诊断：drop table失败[转]

    转: From <http://blog.csdn.net/cyxlxp8411/article/details/7775113> 今天在drop一张表的时候报ORA-00054错误 SQ ...

  5. 国内4G频段划分

    国内4G频段划分 2015年   4G网络建设如火如荼地进行,换手机大家几乎都买的4G手机,那么看到如下参数怎么知道手机所支持的网络呢? SIM 1:4G TDD-LTE:TD38/39/40/41: ...

  6. 电商企业如何做好EDM营销随感

    对于中小型电商企业来说,运用EDM营销是一种非常不错的营销方式,正如我在电商EDM数据营销中的关键介绍一样.下面博主给大家介绍一下电商企业如何做好EDM营销. 一.在EDM邮件内容中跟客户建立信任的关 ...

  7. 各种tips汇总

    才疏学浅,以下整理的东西有些可能还不成熟,措辞有待改进,但是都是我在敲代码的过程中,一点一滴积累总结的,如有不妥和错误,希望大家指正. 让行及元素变成块级元素的方式: position:absolut ...

  8. delphi 每英寸相素点取值偏差

    在所有资料中,每英寸相素点之比一般是这两个值,即:0.0393700788  25.399999961392 但是在GDI编程中,却遇到LOGPIXELSX  LOGPIXELSY 在取值为96DPI ...

  9. 阶段3 1.Mybatis_07.Mybatis的连接池及事务_4 mybatis中使用unpooled配置连接池的原理分析

    把之前的CRUD的代码src下的代码都复制过来 依赖项也都复制过来, 配置文件 整理一番 执行findAll方法的测试 查看日志的输出部分 修改程序池 再来执行findAll方法 Plooled从连接 ...

  10. 把自己活成AI

    干啥都失败,所以从0重新开始. 把自己活成AI 准则1:一件事的对错,只代表这件事本身.多一点的解释都是错误. 准则2:大多数人默认遵守的就是规则和法律.大多数人默认承认的就是道德. 然后取其和法律的 ...