多个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>
时间: 2024-11-06 03:56:23

多个div居中显示的相关文章

设置div中的div居中显示

设置div中的div居中显示 方法一. <div class='big'> <div class='small'>box1</div> </div> style样式: .big{ height:200px; width:200px; border:black solid 1px; position:absolute; left:150px; } .small{ height:100px; width:100px; background-color:green

DIV居中显示

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head>  <title> DIV居中显示</title>

css div居中显示的4种写法

Demo:http://www.feman.cn/h5/center.html 1.absolute 绝对定位 这是我们最常用的一种居中定位写法 要求必须确定div的宽高度 目前市面上的浏览器基本上都支持这种写法 <html lang="en"> <head> <meta charset="UTF-8"> <title>absolute居中定位</title> <style> *{margin:

不固定宽度的div居中显示

对于div的居中 ,如果是有固定宽高的,可以加margin:auto;水平垂直居中,但如果是不固定宽高,又想让div居中的话,这种方式都可能不奏效,达不到想要的效果. 有两种方法:1.加display:inline;变成内联元素,可以给父级加text-align:center 2. .inwrap { float: left; position: relative; left: 50%; } .page { float: left; position: relative; left: -50%;

【HTML】div居中显示

方法1: .parent { width:800px; height:500px; border:2px solid #000; position:relative; } .child { width:200px; height:200px; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-color: red; } 方法2: .parent { width:800px; hei

div居中代码 DIV水平居中显示CSS代码

如何使用CSS让DIV居中显示,让div水平居中有哪些CSS样式呢? 需要的主要css代码有两个,一个为text-align:center(内容居中),另外一个为margin:0 auto:其两个样式需要配合使用才能实现div盒子的居中显示排版. 首先我们对body设置text-align:center,再对需要居中的div盒子设置css样式margin:0 auto,这样即可让对应div水平居中. 实例讲解div居中代码应用,为了观察div居中效果,我们对div设置一个div命名为".div&

IE浏览器让DIV居中

在chrome,FireFox等浏览器中,要想让div居中显示,只要设置margin:0 auto;即可使div居中,在IE中不好,竟然是居左显示.在网上查了IE中DIV居中的方法,父标签设置{width:100%;text-align:center;},需要居中的标签设置{width:XXpx;margin:0 auto;text-align:left;},就可 以实现居中效果了.

div中img依据不同分辨率居中显示,超出部分隐藏

在做banner居中时 碰到的问题,知道可以用背景图实现居中显示,但是内心是想深究下的,故找到几种办法收集一下,后面两种真的是奇技淫巧 来着下面两处 https://www.zhihu.com/question/39742237 https://www.v2ex.com/t/187544 flex position:absolute + negative margin background-image + background-size + background-position 4.父元素po

设定div始终居中显示

<script type="text/javascript"> (function($){ $.fn.extend({ center:function(options){ //center插件 var options=$.extend({ //默认属性值 inside:window, //元素居于窗体中心 transition:0, //元素居中移动时的时间,单位是millisecond minX:0, //元素最小X方向距边值 minY:0, //元素最小Y方向距边值 w