多个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. css3基础必回选择器全解

    1.   *:通用元素选择器   * { margin: 0; padding: 0; } *选择器是选择页面上的全部元素,上面的代码作用是把全部元素的margin和padding设为0,最基本的清除 ...

  2. 在64位SQL Server中创建Oracle的链接服务器

    当我们同时使用SQL Server和Oracle来存储数据时,经常会用到跨库查询.为了方便使用跨库查询,一个最好的办法就是通过创建链接服务器来实现.既可以在SQL Server中创建Oracle的链接 ...

  3. DOM的基本属性

    结构和内容属性1.1 nodeType1.2 nodeName, tagName1.3 innerHTML1.4 innerHTML pitFalls1.5 nodeValue 总结DOM节点是一个对 ...

  4. wex5 实战 框架拓展之2 事件派发与data刷新

    一 前言 讲完公共data,相信大家对框架级的data组件级绑定有了更新的认识,接下来我们继续深入,以求研究明白wex5的框架能力. 在一个web项目中,其实有一个data, 是基础框架必须的data ...

  5. oracle游标透彻详解分析

    主:本文来自:http://www.cnblogs.com/huyong/archive/2011/05/04/2036377.html 4.1 游标概念 4.1.1 处理显式游标 4.1.2 处理隐 ...

  6. boost asio sync

    Service: #include<boost/asio.hpp> #include<boost/thread.hpp> #include<iostream> #i ...

  7. em详解

    最近详细阅读了一下CSS2.2文档,对em单位有了深刻的认识 原文在此:The 'em' unit is equal to the computed value of the 'font-size'  ...

  8. 彻底卸载Visual Studio 2013、Visual Studio 2015

    彻底卸载 Visual Studio 2013. Visual Studio 2015 以及后续各种版本使用方法0. 解压下载的 TotalUninstaller.zip 文件1. 使用 admini ...

  9. MVC程序中实体框架的Code First迁移和部署

    01. 启用迁移 [在控制台中,输入以下命令:]enable-migrations  //命令将在项目中创建一个迁移文件夹.同时文件夹中包含一个Configuration.cs文件,你可以编辑该文件来 ...

  10. 【转】关于phpcms的学习

    在实现PHPCMS网站过程中,根据业务需求,我们遇到很多问题,特此总结如下,以便大家参考学习. [1]PHPCMS V9系统目录简析 在研究所有问题之前,请先了解一下系统的文件目录结构,具体如下图所示 ...