页面中有多个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居中显示的更多相关文章

  1. 设置div中的div居中显示

    设置div中的div居中显示 方法一. <div class='big'> <div class='small'>box1</div> </div> s ...

  2. DIV居中显示

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. 让几个横向排列的浮动子div居中显示的方法

    div设置成float之后,就无法使子div居中显示了,那么如何让几个横向排列的浮动的div居中显示呢,下面有个不错的方法,希望对大家有所帮助 div设置成float之后,在父div中设置text-a ...

  4. css div居中显示的4种写法

    Demo:http://www.feman.cn/h5/center.html .absolute 绝对定位 这是我们最常用的一种居中定位写法 要求必须确定div的宽高度 目前市面上的浏览器基本上都支 ...

  5. 不固定宽度的div居中显示

    对于div的居中 ,如果是有固定宽高的,可以加margin:auto;水平垂直居中,但如果是不固定宽高,又想让div居中的话,这种方式都可能不奏效,达不到想要的效果. 有两种方法:1.加display ...

  6. div 居中显示

    <html lang="en"> <head> <meta charset="UTF-8"> <title>di ...

  7. 【HTML】div居中显示

    方法1: .parent { width:800px; height:500px; border:2px solid #000; position:relative; } .child { width ...

  8. 使用inline-block，使前面img,后面空div居中显示在一行后，导致当div中有内容时，div下移问题

    .pro_li img,.pro_sm{display: inline-block; *display:inline;*zoom:1;vertical-align: middle ;} 解决方法:使用 ...

  9. 【转】div居中代码 DIV水平居中显示CSS代码

    原文地址:http://www.divcss5.com/rumen/r622.shtml 如何使用CSS让DIV居中显示,让div水平居中有哪些CSS样式呢? 需要的主要css代码有两个,一个为tex ...

随机推荐

  1. [问题记录.VisualStudio]VS2013无法新增和打开项目

    [问题描述] 1) 打开项目失败,报“项目文件只读”或“空引用”错误. 2) 无法新建项目,没有任何可用模板. 3) TFS都正常 [问题产生] 机器环境: 1) 装的Win10双系统,其中一个系统是 ...

  2. 利用PHP取二进制文件头判断文件类型

    <?php $files = array('D:\no.jpg', 'D:\no.png','D:\no2.JPEG','D:\no.BMP'); $fileTypes = array( 779 ...

  3. solr多词匹配搜索问题及解决

    使用solr进行某较长词搜索时出现了一些问题,及解决方案. 1.问题:solr默认使用OR方式搜索,当搜索一个很长的次,比如“XX集团股份有限公司”,分词器分词后,使用OR方式匹配,会匹配到很多结果. ...

  4. rpm常用命令

    * 手动安装 rpm 包  `rpm-ivh xxxxx.rpm`  参数:   --force 即使覆盖其他包的文件也没强迫安装   --nodeps 即使依赖包没安装,也被强制安装 * 查看 rp ...

  5. Regular Expression Matching leetcode

    递归方法运行时间过长.考虑使用动态规划的方法. 代码如下: bool isMatch(string s, string p) { int i,j; int m=s.size(); int n=p.si ...

  6. Ceph剖析：线程池实现

    线程池ThreadPool的实现符合生产者-消费者模型,这个模型解除生产者消费者间的耦合关系,生产者可以专注处理制造产品的逻辑而不用关心产品的消费,消费者亦然.当然,生产者消费者之间需要一个连接的纽带 ...

  7. 利用(Tcmalloc) google-perftools优化Nginx和MySQL性能

    一.安装libunwind wget http://download.savannah.gnu.org/releases/libunwind/libunwind-1.1.tar.gz 本地下载:htt ...

  8. Excel导入-----导出(包含所选和全部)操作

    在做系统的时候,很多时候信息量太大,这时候就需要进行Excel表格信息的导入和导出,今天就来给大家说一下我使用Excel表格信息导入和导出的心得. 1:首先需要在前端显示界面View视图中添加导入Ex ...

  9. 京东2017校园招聘笔试题 【第K个幸运数】

    题目描述 4和7是两个幸运数字,我们定义,十进制表示中,每一位只有4和7两个数的正整数都是幸运数字. 前几个幸运数字为:4,7,44,47,74,77,444,447... 现在输入一个数字K,输出第 ...

  10. fatal error: call to undefined function imagettftext

    参照:http://stackoverflow.com/questions/7290958/php-fatal-error-call-to-undefined-function-imagettftex ...