多个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>

 

posted on 2016-08-12 17:27  Faquir 阅读( ...) 评论( ...) 编辑 收藏

转载于:https://www.cnblogs.com/Faquir/p/5765790.html

表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
相关推荐
©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页