<!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. Java多线程的创建方法

    Java 线程类也是一个 object 类,它的实例都继承自java.lang.Thread 或其子类. 可以用如下方式用 java 中创建一个线程,执行该线程可以调用该线程的 start()方法: ...

  2. wannafly 练习赛10 E 数列查找（莫队+分块分块分块......）

    链接:https://www.nowcoder.net/acm/contest/58/E 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 32768K,其他语言65536K 64bit ...

  3. 前端面试题-CSS选择器

    一.CSS选择器作用 CSS 选择器用于定位我们想要给予样式的 HTML 元素,但不只是在 CSS 中,JavaScript 对 CSS 的选择器也是支持的,比如 document.document. ...

  4. iOS 自定义一对UI表现相反的按钮

    假如有一对按钮[重置][提交],要让他们的默认UI和点击的UI表现刚好相反 [提交]按钮,默认橙色,点击边框是橙色,字体是橙色,背景变白色 [重置]按钮,默认白色橙色,边框是橙色,点击字体是白色,背景 ...

  5. virt-manager 使用 shh 远程访问配置方法

    1.下载安装 Xming+Xshell  或者 Xming+putty,启动Xming服务 Xming下载地址 2.XMing的配置:打开XLaunch,记住Display Number,现在这里是0 ...

  6. ps 和 pstree的用法

    ps 查看某个具体的命令进程: ps -C cmd-name: 如: ps -C httpd // 如果有多个名字相同的进程, 如httpd... 应该是它下面的子进程, 这时会显示第一个进程id. ...

  7. VSCode - 使用 WSL（Windows Subsystem for Linux）

    一开始我是只将 VSCode 集成的终端改成 WSL 的 Bash,结果发现内置的 GIt 用的还是 Windows 的 Git,Git Hooks 用的 Windows 的环境,上网搜了一下发现有很 ...

  8. ES6数组的拓展

    扩展运算符 扩展运算符(spread)是三个点(...).它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列. console.log(...[1, 2, 3]) // 1 2 3 c ...

  9. dcef3 指出一个坑

    dcef3 指出一个坑 http://ju.outofmemory.cn/entry/80119 BccSafe's Blog 2014-06-11 2388 阅读   dcef3提供了TChromi ...

  10. Struts2基本流程

    转载:https://www.cnblogs.com/wkrbky/p/5894174.html 概述: Struts2框架由三部分构成:核心控制器.业务控制器和用户实现的业务逻辑组件.在这三部分中, ...