多个div居中显示

最新推荐文章于 2021-06-19 17:03:48 发布

转载最新推荐文章于 2021-06-19 17:03:48 发布 · 369 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/Faquir/p/5765790.html

本文介绍了一种使页面中多个div并排且居中显示的方法，通过为外层div设定宽度并应用居中样式，实现美观布局。示例代码展示了如何使用HTML和CSS实现这一效果。

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