码迷,mamicode.com
首页 > 其他好文 > 详细

多个div居中显示

时间:2016-08-12 18:01:26      阅读:157      评论:0      收藏:0      [点我收藏+]

标签:

  页面中有多个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居中显示

标签:

原文地址:http://www.cnblogs.com/Faquir/p/5765790.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!