兼容性：不兼容IE7

1.左右对齐

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>左右两端布局</title>

    <style>

    .table {

        display: table;

        border: 1px solid #06c;

        padding: 15px;

        width: 100%;

    }

    .table .table-left {

        text-align: left;

        display: table-cell

    }

    .table .table-right {

        text-align: right;

        display: table-cell

    }

    .table .table-content {

        width: 100px;

        height: 100px;

        border: 1px solid #ccc;

        text-align: center;

        display: inline-block;

        font-size: 40px;

        line-height: 100px;

    }

    </style>

</head>

<body>

    <div class="table">

        <div class="table-left">

            <div class="table-content">左边</div>

        </div>

        <div class="table-right">

            <div class="table-content">右边</div>

        </div>

    </div>

</body>

</html>

2.居中

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>图片居中对齐</title>

    <style>

    * {

        box-sizing: border-box;

    }

    .table {

        display: table;

        border: 1px solid #06c;

        padding: 5px;

        max-width: 1000px;

        margin: 10px auto;

        width: 100%;

    }

    .table-center {

        height: 150px;

        width: 100px;

        border: 1px solid red;

        display: table-cell;

        vertical-align: middle;

        text-align: center;

        background-color: #4679bd;

    }

    </style>

</head>

<body>

    <div class="table">

        <div class="table-center">

            <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1556086970323&di=51c11bb425e5f92ca3c9e455aad95675&imgtype=0&src=http%3A%2F%2Fpic.58pic.com%2F58pic%2F13%2F20%2F57%2F95i58PIC6Qh_1024.jpg" width="50px" height="50px" alt="logo" />

        </div>

    </div>

</body>

</html>

3.平均分

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>平均分</title>

    <style>

    * {

        box-sizing: border-box;

    }

    .table {

        display: table;

        border: 1px solid #000;

        padding: 5px;

        max-width: 1000px;

        margin: 0 auto;

        width: 100%;

    }

    .table ul {

        display: table;

        width: 100%;

        padding: 0;

        border-right: 1px solid #ccc;

    }

    .table ul li {

        display: table-cell;

        border: 1px solid #ccc;

        text-align: center;

        height: 100px;

        border-right: none;

        line-height: 100px;

    }

    </style>

</head>

<body>

    <div class="table">

        <ul>

            <li>1</li>

            <li>2</li>

            <li>3</li>

            <li>4</li>

            <li>5</li>

        </ul>

    </div>

</body>

</html>

记录display:table的使用的更多相关文章

  1. 使用display:table来解决一些问题

    一直有,多栏的需求,当然用table布局,很快就做完了.不怎么喜欢用table,刚开始使用display:table,但是有一条老是不能达到我的效果,那就是有一行不固定宽度的时候,就不知道怎么处理,今 ...

  2. [css display],table待续

    昨天复习了flex布局,今天打算继续,才发现有display:table,今天有的点,别的先写上,其他的后补吧 css display // none 此元素不会被显示. // block 此元素将显 ...

  3. 垂直居中display:table;

    父级元素 display:table: 子元素 display:table-cell:vertical-align:middle:

  4. [转]基于display:table的CSS布局

    当IE8发布时,它将支持很多新的CSS display属性值,包括与表格相关的属性值:table.table-row和table-cell,它也是最后一款支持这些属性值的主流浏览器.它标志着复杂CSS ...

  5. CSS display:table属性用法- 轻松实现了三栏等高布局

    display:table:此元素会作为块级表格来显示(类似 <table>); display:table-cell属性指让标签元素以表格单元格的形式呈现,类似于td标签.目前IE8+以 ...

  6. display:table 水平居中

    <div style="width:auto; margin:auto;display:table"> <div style="width: 100px ...

  7. display:table表格合并单元格

    直接上代码: <%@ page language="java" contentType="text/html; charset=UTF-8" pageEn ...

  8. Display:table;妙用，使得左右元素高度相同

    我们在设计网页的时候,为了左右能够分明一点,我们经常会在左边元素弄一个border-right,但是出现一个问题,如果左边高度比较小,这根线就短了,下面空了一部分,反正如果在右边的元素弄一个borde ...

  9. 基于CSS属性display:table的表格布局的使用

    项目改造中遇到DIV+CSS实现的table,新需求需要在表格使用单元格合并,网上调查返现CSS display:table实现的table表格,没有单元格的属性和样式,经过一番思考,曲折现实了单元格 ...

随机推荐

  1. WinServer设置多用户登录

    1.运行 gpedit.msc →computer configuration→administrative templates→windows componets→Remote Desktop→Re ...

  2. Win7 + CentOS7 双系统

    记录一下更改系统启动菜单的方法. 前提: 1. 先安装 Win7 在硬盘第一分区,其它分区在 Win7 下处于未分配状态. 2. 再安装 CentOS 到上述未分配分区.(注意:手动分区时,可以留一定 ...

  3. Linux 开启和关闭 Ping 操作

    Linux 默认是开启 ping 操作的,通过以下两种方式可以开启和关闭 ping 操作 . 1.修改内核参数 通过内核参数设置也有两种方式,一种是临时修改,一种是永久修改. 1.1 临时设置 PIN ...

  4. Ons 让人欲哭无泪问题，官方介绍不详

      订阅不一致导致消费时成功时失败问题: Console下使用.Net SDK 访问队列成功. Windows 服务下使用.Net SDK 访问队列成功.   有时成功,有时则没有任何反应-   解决 ...

  5. python中的2、8、16、10进制之间的转换

    python除法的坑 众所周知,python除法有两个运算符,一个是/,还有一个是//,那么这两个有什么不同之处呢? 从图片可以得知,使用//返回一个float类型,而使用/返回一个int类型.我们总 ...

  6. 跟王思聪热狗图一样大热的Redis，还不赶紧来Get一下？

    前言 不禁喊出一句ig牛逼!哈哈哈 这个话题是不是有点过时了?但说到Redis,真的是被强行灌输的,到处都会被安利Redis,吓得只会mysql和oracle的我,赶紧去get一波.. 数据库种类 关 ...

  7. Redis集群伸缩

    集群扩容 前提准备,目前集群中一共有6台机器,端口号分别是6381.6382.6383.6384.6385.6386 1) 准备新节点 准备两个新节点,端口号为6387和6388,配置和以前集群配置一 ...

  8. centos7 安装 smplayer

    How to setup multimedia on CentOS 7 You will need to also install the EPEL repository as nux-dextop ...

  9. RAC(ReactiveCocoa)介绍（一）

    最近在学习RAC,之前在iOS工作中,类之间的传值,无非是block.delegate代理.KVO和Notification等这几种方法.在RAC中,同样具备替代block.delegate代理.KV ...

  10. Sql万能分页代码

    sql数据库中常用的分页 我做了一个万能的 用的上的小伙伴拿去耍吧 go  ----万能分页代码create procedure [dbo].[sp_datapager] @pagesize int, ...