多个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. android 图片压缩

    引用:http://104zz.iteye.com/blog/1694762 第一:我们先看下质量压缩方法: private Bitmap compressImage(Bitmap image) { ...

  2. h5视频上传之前端视频压缩研究

    今天领导接到一个h5上传手机视频的需求,主要是要看用户在这个视频中有没有完成某个任务,比如投篮进了几个球. 但是由于手机拍摄的视频文件大小有点大,直接上传的话,用户流量顶不住,而且特别耗时,在这样的情 ...

  3. Excel应该这么玩——7、我是预言家：绘制趋势图

    让我们先看一个场景:你是公司销售部的员工,你手里有公司最近几年的销售额相关的数据,经理希望你预测下个月的销售额.盯着一堆数据,你或许会想到画一张XY坐标图,然后将每个月份的销售额标定为一个坐标.但是下 ...

  4. table 边框显示

    .td{border:solid #add9c0; border-width:0px 1px 1px 0px;}.table{border:solid #add9c0; border-width:1p ...

  5. maven 构建一个web项目

    maven已经大型的Java项目的管理工具,其功能非常强大,这里简单总结一下maven构建web项目的过程.本文介绍的是集成环境下的maven构建web项目. 一.准备 1.安装maven. 2.把m ...

  6. WCF、Net remoting、Web service概念及区别

    Windows通信基础(Windows Communication Foundation,WCF)是基于Windows平台下开发和部署服务的软件开发包(Software Development Kit ...

  7. SQL2008完全卸载详解（图解）

    一．    SQL2008卸载. 1.从控制面板卸载 1)点击计算机右下角“开始”,点击“控制面板”

  8. java 线程返回值

    1.传统方式需要新建一个接口类,然后在接口类中将结果在方法中作为参数进行处理 package de.bvb.test3; public class Test3 { public static void ...

  9. java连接mysql步骤

    转自:http://www.cnblogs.com/hongten/archive/2011/03/29/1998311.html JDBC连接mysql数据库   •创建一个以JDBC连接数据库的程 ...

  10. Apache_proxy负载均衡和Session复制

    今天上网查了查资料,之前使用apache的jk模块做负载均衡.后来觉得jk的负载配置有点死板,只能按照负载权重值来进行请求的分发,没有做到比较智能的负载平衡,并且使用mod_jk访问页面发现确实比较慢 ...