多个div在某个div的中间,他们个数不一定但是需要在那个父级div中显示(和margin:0 auto一样的效果)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">

.div_allinline
{
text-align:center;
margin:0 auto;
padding:0;
clear:both;
}

.subdiv_allinline
{
margin:0;
padding:0;
display:inline-block;
_display:inline;
*display:inline;
zoom:1;
}
</style>

</head>

怎么居中显示在一行呢？使用inline-block来做这个处理。

<body>
<div class="div_allinline">
<div class="subdiv_allinline">
你好，这是div1的第一行。
<br>你好，这是div1的第二行
</div>
<div class="subdiv_allinline">
你好，这是div2的第一行。
</div>
<div class="subdiv_allinline">
你好，这是div3的第一行。
<br>你好，这是div3的第二行
</div>
</div>
</body>
</html>

IE6，IE7中不支持inline-block，所以针对IE6，IE7写了下面的三个属性。

_display:inline;
    *display:inline;
    zoom:1;

这样貌似就主流的浏览器里面都能够正常显示。div的宽度可以根据情况设置。

多个div同时居中的写法的更多相关文章

  1. 用CSS让DIV上下左右居中的方法

    转载自喜欢JS的无名小站 例如 一个父div(w:100%;h:400px)中有一个子div(w:100px;100px;).让其上下左右居中. 方法一(varticle-align) 理念 利用表格 ...

  2. 左边图标右边文字，在div里居中

  3. 绝对定位的DIV绝对居中显示

    绝对居中:即在客户端上任何分辨率下纵横方向均居中 紫色的正方形为绝对定位的div position:absolute; top: 50%; left: 50%; 只能把div定位在以红色圈为起点的位置 ...

  4. HTML5：footer定位（底部+居中）的探讨+div图片居中问题

    初学HTML+CSS布局,尝试自己写一个百度首页,可是footer的定位遇到麻烦而且百度没有好的解决方法,在此记录下逐步的过程.记录之,备忘. 初学,解决方法难免出现不妥之处,也请看到这篇文章的前辈指 ...

  5. div居中与div内容居中,不一样

    1.div自身居中 使用margin:0 auto上下为0,左右自适应的css样式. 要让div水平居中,那么除了设置css margin:0 auto外,还不能再设置float,不然将会导致div靠 ...

  6. css 如何使图片与文字在div中居中展示？

      1.情景展示 如何将图片与文字在div中一起居中展示? HTML片段 <div style="background: #fff;padding-top: 5px;border:1p ...

  7. jQuery实现的浮动层div浏览器居中显示效果

    本文实例讲述了jQuery实现的浮动层div浏览器居中显示效果.分享给大家供大家参考,具体如下: 1.在页面的head中引入jQuery <script type="text/java ...

  8. 层居中绝对定位的div的居中方法，下面的写法兼容IE系列浏览器和火狐浏览器

    详细解说,直接看样式:#dingwei{padding:10px;background-color:#003300;color:#FFFFFF; width:600px;height:300px; d ...

  9. 绝对定位的div的居中方法，下面的写法兼容IE系列浏览器和火狐浏览器。

    详细解说,直接看样式:#dingwei{padding:10px;background-color:#003300;color:#FFFFFF; width:600px;height:300px; d ...

随机推荐

  1. gradle使用

    查看子工程引用的jar包 gradle child_project:dependencies > dep.txt

  2. eBox（stm32） 之中断结构

    eBox的中断结构参考了mbed,和我们平时所用的中断结构有些差异,不容易理解,最近仔细看了底层代码,终于搞清楚了,总结一下         一  首先要要搞清楚的几个概念:类的静态成员,实例成员   ...

  3. 二十二、Java基础--------GUI入门

    在java学习过程中GUI是一个比较特殊的知识体系(笔者对安卓不是很了解),似乎在为安卓的学习做着准备,本文将将展示一个综合案例. 创建一个类似于记事本的程序,包含打开与保存功能. package G ...

  4. Selenium 2.0 + Java 入门之环境搭建

    最近在研究Java+Selenium的自动化测试,网上的资料比较多,自己测试实践后,整理出来一套相对比较完善的环境资料,因为网上很多下载实践的过程中,发现出现了很多不匹配的问题,什么jdk和eclip ...

  5. Android 开发之 ---- 底层驱动开发(一) 【转】

    转自:http://blog.csdn.net/jmq_0000/article/details/7372783 版权声明:本文为博主原创文章,未经博主允许不得转载. 驱动概述 说到 Android ...

  6. Mysql修改字段长度

    alter table '表名' modify column '列名' varchar(50);

  7. mysql 替换某个字段中的某个字符

    遇到这么个情况: 比如: Msql里面的某个表的某个字段里面存储的是一个人的地址,有一天这个地址的里面的某个地 名变了,那么他的地址也就要变: 比如: 原来是: number              ...

  8. CentOS安装cacti

    1.安装软件包 yum install -y httpd php php-mysql \ php-snmp mysql mysql-server \ perl-DBD-MySQL php-pdo ne ...

  9. 高通camera学习笔记

    http://www.2cto.com/kf/201609/548725.html http://www.android100.org/html/201508/24/176303.html

  10. Tips collection of iOS development

    <转>UITableView当数据很少的时候,去掉多余的cell分割线   在tableView初始化的时候 UIView *v = [[UIViewalloc] initWithFram ...