页面中有多个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. unity3d的Texture2D与opencv的Mat之间的相互转换

    这里的opencv使用的是opencvsharp,它是c#语言对c++的opencv的一层封装,使得c#开发者可以更方便的使用opencv,而不必纠结于跨语言调用的问题. 因此,这里使用的opencv ...

  2. centos查看系统cpu个数、核心书、线程数

    1.查看物理cpu个数 grep 'physical id' /proc/cpuinfo | sort -u | wc -l 2.查看核心数量 grep 'core id' /proc/cpuinfo ...

  3. 日期函数(sql)

    SQL 标量函数----->日期函数 day() .month().year().2009年02月23日 星期一 11:30 SQL 标量函数----->日期函数 day() .month ...

  4. Java 验证码、二维码

    Java 验证码.二维码 资源 需要:   jelly-core-1.7.0.GA.jar网站:   http://lychie.github.io/products.html将下载下来的 jelly ...

  5. jQuery操作Table tr td常用的方法

    虽然现在DIV+CSS进行页的布局大行其道,但是很多地方使用table还是有很多优势,用table展示数据是比较方便的,下面汇总了jQuery操作Table tr td常用的方法,熟记这些操作技巧,下 ...

  6. Python中实现异步并发查询数据库

    这周又填了一个以前挖下的坑. 这个博客系统使用Psycopy库实现与PostgreSQL数据库的通信.前期,只是泛泛地了解了一下SQL语言,然后就胡乱拼凑出这么一个简易博客系统. 10月份找到工作以后 ...

  7. jQuery常用的插件及功能汇总-持续

    1.图片轮播 jquery.soChange.js 2.滚动展示 MSClass.js 3.md5加密 md5.js 4.cookie操作 cookie.js 5.

  8. 关于String中+与StringBuilder的问题

      字符串连接可以通过两种方法实现,其中一种是在Java中提供的一个StringBuilder类(这个类只在J2SE5及以上版本提供,以前的版本使用StringBuffer类). 字符串是Java程序 ...

  9. HTTP协议-----小白

    HTTP是一个属于应用层的面向对象的协议. ***OSI的7层从上到下分别是 7 应用层 6 表示层 5 会话层 4 传输层 3 网络层 2 数据链路层 1 物理层 HTTP协议的主要特点可概括如下: ...

  10. C#开发Android环境搭建

    目前破解比较稳定的版本(我亲自尝试过的)是4.2. wuleba上的4.6,4.8,4.10 破解均会出现各种问题. 1 当前电脑账户最好是使用英文账号,而不要使用汉字,否则路径会出现乱码问题. 2 ...