zoukankan      html  css  js  c++  java
  • 多个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;
                400px;
                border-radius: 0.5em;
            }
        </style>
    </head>
    <body>
    <div class="container" align="center">
    
        <div align="center" style="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>
  • 相关阅读:
    JDBC初体验
    Linux的常用命令--文件的相关操作
    Spring框架之AOP的基本配置
    坦克大战系列7-策略分析之扫描策略和移动策略
    坦克大战系列8-策略分析之瞄准策略
    CF846F Random Query
    CF388C Fox and Card Game
    CF1097F Alex and a TV Show
    CF1276C Beautiful Rectangle
    [SDOI2016]征途
  • 原文地址:https://www.cnblogs.com/Faquir/p/5765790.html
Copyright © 2011-2022 走看看