多个div居中显示
页面中有多个div时我们希望并排居中显示，可以通过在并排显示的div上一层再加一个div，设定宽度，然后让其居中显示达到需要的效果。
关键是要对外层div设定宽度。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
table .table-striped{
}
table th{
text-align: left;
height: 30px;
background: #deeeee;
padding: 5px;
margin: 0;
border: 0px;
}
table td{
text-align: left;
height:30px;
margin: 0;
padding: 5px;
border:0px
}
table tr:hover{
background: #eeeeee;
}
.span6{
float:left;
/*float:inherit;*/
margin:10px;
background:#adff2f;
width:400px;
border-radius: 0.5em;
}
</style>
</head>
<body>
<div class="container" align="center"> <div align="center" style="width:850px;height:200px;background: cornflowerblue;"> <div class="span6">
并排显示的div之一
<table class="table table-striped">
<tr>
<th colspan="2">Summary</th>
</tr>
<tr>
<td>Size</td>
<td>223 (bytes)</td>
</tr>
</table>
</div> <div class="span6">
并排显示的div之二
<table class="table table-striped">
<tr>
<th colspan="2">Inputs and Outputs</th>
</tr>
<tr>
<td>Total Input</td>
<td>
<span data-c="230585579" data-time="1470967197000">2.30585579 BTC</span>
</td>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>
多个div居中显示的更多相关文章
- 设置div中的div居中显示
设置div中的div居中显示 方法一. <div class='big'> <div class='small'>box1</div> </div> s ...
- DIV居中显示
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 让几个横向排列的浮动子div居中显示的方法
div设置成float之后,就无法使子div居中显示了,那么如何让几个横向排列的浮动的div居中显示呢,下面有个不错的方法,希望对大家有所帮助 div设置成float之后,在父div中设置text-a ...
- css div居中显示的4种写法
Demo:http://www.feman.cn/h5/center.html .absolute 绝对定位 这是我们最常用的一种居中定位写法 要求必须确定div的宽高度 目前市面上的浏览器基本上都支 ...
- 不固定宽度的div居中显示
对于div的居中 ,如果是有固定宽高的,可以加margin:auto;水平垂直居中,但如果是不固定宽高,又想让div居中的话,这种方式都可能不奏效,达不到想要的效果. 有两种方法:1.加display ...
- div 居中显示
<html lang="en"> <head> <meta charset="UTF-8"> <title>di ...
- 【HTML】div居中显示
方法1: .parent { width:800px; height:500px; border:2px solid #000; position:relative; } .child { width ...
- 使用inline-block，使前面img,后面空div居中显示在一行后，导致当div中有内容时，div下移问题
.pro_li img,.pro_sm{display: inline-block; *display:inline;*zoom:1;vertical-align: middle ;} 解决方法:使用 ...
- 【转】div居中代码 DIV水平居中显示CSS代码
原文地址:http://www.divcss5.com/rumen/r622.shtml 如何使用CSS让DIV居中显示,让div水平居中有哪些CSS样式呢? 需要的主要css代码有两个,一个为tex ...
随机推荐
- springmvc 学习笔记_1
一.回顾JavaWeb中的MVC设计模式 1)MVC这种设计模式,不光运用于Web领域,而且也能用于非Web领域 2)今天说的MVC特指一种表现层设计模式,不限于Java语言 二.回顾struts2+ ...
- 【经验记录】Jconsole Jvisualvm 监控Tomcat
环境:centos 6 1.首先检查hostname是否正确,输入以下命令 hostname -i 如果输出机器ip,则表示正确,如果输出 hostname: Unknown host 查看/etc/ ...
- Div+CSS命名规范
注意事项:1.命名遵循驼峰式 2.尽量用中文 3.不加中杠和下划线 4.尽量不缩写,除非一看就明白的单词 头:header 标志:logo 友情链接:friendlink 内容:c ...
- sql数据查询，在程序中较慢，在MS SQL2005 Management Studio中速度快，情况分析及解决
这两天遇到一个问题,在.net开发的网站,执行sql查询,从sql profiler中监控卡看,执行时间22s. 但是拷出的sql在Management Studio中直接执行,时间仅4ms. 解决方 ...
- Slight difference between C++ and C
In C++, results of assignment operation, prefix increment and prefix decrement are all lvalues, the ...
- 用OMT方法建立其分析模型： 本大学基于网络的课程注册系统。
OMT方法是用3种模型来描述软件系统,分别是对象模型,动态模型,功能模型. 1)对象模型:课程网络注册系统 2)动态模型:序列图 3)功能模型:数据流图 0层DFD图 1层DFD图
- Getting Started With Hazelcast 读书笔记(第五章,第六章)
第五章 监听 本章应该是Hazelcast的核心机制了,Hazelcast通过注册各种监听器获悉集群中其他应用对数据的修改,成员的加入,退出等. 分为3个层次. 1.EntryListener(对数据 ...
- iOSDate时间格式（转）
在开发iOS程序时,有时候需要将时间格式调整成自己希望的格式,这个时候我们可以用NSDateFormatter类来处理.例如: //实例化一个NSDateFormatter对象 NSDateForma ...
- Linux命令小结：crontab/netstat/iostat/sar
crontab cron可以设定在指定的时间运行任务. 1.查看定时任务 [root@client1 ~]# crontab -l -u root */1 * * * * date >> ...
- 搭建高可用mongodb集群（一）——配置mongodb
在大数据的时代,传统的关系型数据库要能更高的服务必须要解决高并发读写.海量数据高效存储.高可扩展性和高可用性这些难题.不过就是因为这些问题Nosql诞生了. NOSQL有这些优势: 大数据量,可以通过 ...