多个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 ...
随机推荐
- JavaScript 详说事件机制之冒泡、捕获、传播、委托
DOM事件流(event flow )存在三个阶段:事件捕获阶段.处于目标阶段.事件冒泡阶段. 事件捕获(event capturing):通俗的理解就是,当鼠标点击或者触发dom事件时,浏览器会 ...
- python学习之——splinter介绍
Splinter是什么: 是一个用 Python 编写的 Web 应用程序进行验收测试的工具. Splinter执行的时候会自动打开你指定的浏览器,访问指定的URL,然后你所开发的模拟的任何行为,都会 ...
- mysql修改为utf8格式
1.修改相应数据库的编码格式: -- 修改数据库编码为utf8 ALTER DATABASE databasename CHARACTER SET utf8 COLLATE utf8_general_ ...
- $POST 、$HTTP_RAW_POST_DATA、php://input三者之间的区别
$POST .$HTTP_RAW_POST_DATA.php://input三者之间的区别 访问原始 POST 数据的更好方法是 php://input或者$HTTP_RAW_POST_DATA.$H ...
- [译]关于iOS和OS X废弃的API你需要知道的一切
原文: Everything You Need to Know about iOS and OS X Deprecated APIs 如你所知,已废弃(Deprecated)的API指的是那些已经过时 ...
- php内核探索 [转]
PHP内核探索:从SAPI接口开始 PHP内核探索:一次请求的开始与结束 PHP内核探索:一次请求生命周期 PHP内核探索:单进程SAPI生命周期 PHP内核探索:多进程/线程的SAPI生命周期 PH ...
- EasyUI DataGrid getChecked/getSelections 获取不到数据
今天使用getChecked获取选择的行,结果总是获取一行数据,于是换用getSelections,结果还是一样,想起之前做的项目,把idField换了下,之后getChecked/getSelect ...
- 解决yum报错集
yum -y install gcc gcc-c++ makeError: Multilib version problems found. This often means that the ro ...
- base64格式的图片如何上传到oss
---恢复内容开始--- 对于base64图片的上传这个东西,一直是一个问题尤其是上传到oss.我们这次开发由于需要修剪图片,使用了h5的很多新特性. h5修剪图片,使用了我们的canvas.这个步骤 ...
- css3的transition过渡
从*开始样式*,经过指定*时间*后,缓慢过渡到*结束样式* 语法:transition:要变化的属性名 持续时间 速度变化类型 延迟 强调:写在开始样式中 如何实现多个属性同时过渡:2种办法: 1. ...