多个div同时居中的写法
多个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同时居中的写法的更多相关文章
- 用CSS让DIV上下左右居中的方法
转载自喜欢JS的无名小站 例如 一个父div(w:100%;h:400px)中有一个子div(w:100px;100px;).让其上下左右居中. 方法一(varticle-align) 理念 利用表格 ...
- 左边图标右边文字,在div里居中
- 绝对定位的DIV绝对居中显示
绝对居中:即在客户端上任何分辨率下纵横方向均居中 紫色的正方形为绝对定位的div position:absolute; top: 50%; left: 50%; 只能把div定位在以红色圈为起点的位置 ...
- HTML5:footer定位(底部+居中)的探讨+div图片居中问题
初学HTML+CSS布局,尝试自己写一个百度首页,可是footer的定位遇到麻烦而且百度没有好的解决方法,在此记录下逐步的过程.记录之,备忘. 初学,解决方法难免出现不妥之处,也请看到这篇文章的前辈指 ...
- div居中与div内容居中,不一样
1.div自身居中 使用margin:0 auto上下为0,左右自适应的css样式. 要让div水平居中,那么除了设置css margin:0 auto外,还不能再设置float,不然将会导致div靠 ...
- css 如何使图片与文字在div中居中展示?
1.情景展示 如何将图片与文字在div中一起居中展示? HTML片段 <div style="background: #fff;padding-top: 5px;border:1p ...
- jQuery实现的浮动层div浏览器居中显示效果
本文实例讲述了jQuery实现的浮动层div浏览器居中显示效果.分享给大家供大家参考,具体如下: 1.在页面的head中引入jQuery <script type="text/java ...
- 层居中绝对定位的div的居中方法,下面的写法兼容IE系列浏览器和火狐浏览器
详细解说,直接看样式:#dingwei{padding:10px;background-color:#003300;color:#FFFFFF; width:600px;height:300px; d ...
- 绝对定位的div的居中方法,下面的写法兼容IE系列浏览器和火狐浏览器。
详细解说,直接看样式:#dingwei{padding:10px;background-color:#003300;color:#FFFFFF; width:600px;height:300px; d ...
随机推荐
- Node.js Express 框架
Node.js Express 框架 Express 简介 Express 是一个简洁而灵活的 node.js Web应用框架, 提供了一系列强大特性帮助你创建各种 Web 应用,和丰富的 HTTP ...
- 用于svn添加当前目录下所有未追踪的文件,和删除所有手动删除的文件的脚本
由于要经常用到类似与 git 中的 git add --all 这种操作,但是发现svn中并不支持类似的操作. 虽然可以使用 wildcard 进行匹配,但是 wildcard是在shell中进行匹配 ...
- 【转】Android各大发布市场
前言 如果只有一个或者少许的两三个Android市场,本文也没用存在的必要性,本文谨献给同在Android奋战的同仁. 声明 欢迎转载,但请保留文章原始出处:) 博客园:http://www.cnbl ...
- MS CRM 2013 Plugin 注册工具登录后空白
解决办法 把en-us, zh-CN 目录随便改个名字就好了
- Qt QObject
[1]Qt的QObject 1.测试代码如下: #include<QApplication> #include<QPushButton> #include<QDebug& ...
- php常用函数file
fopen:(创建并)打开一个文件或url地址. 模式 说明 r 只读,将将文件指针指向文件开始位置 r+ 读写,将文件指针指向文件开始位置 w 只写,将文件指针指向文件开始位置将将文件内容清空,如果 ...
- JS_MediaPlayer类
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/T ...
- php 自动绑定di容器实现
<?php class Bim { public function doSth() { echo __METHOD__.PHP_EOL; } } class Bar { protected $b ...
- Material Design学习
前言: 最为一个用习惯了bootstrap的前端小菜,今天偶然听闻material design 这个从未听闻的前端框架,带着好奇开始了新的尝试,并将bootstrap跟material design ...
- AngularJS控制器
AngularJS 控制器 控制 AngularJS 应用程序的数据,控制器是常规的 JavaScript 对象. 1. angular.module(name, [requires], [confi ...