兼容性：不兼容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. DataPipeline | PayPal庞姬桦：大数据在小微企业贷款上的运用

    庞姬桦女士毕业于北京大学和美国哥伦比亚大学,目前担任PayPal公司消费者风险管理总监,负责通过大数据实现对互联网金融风险的侦测.跟踪.管控和防范.在加入PayPal之前,曾任职于渣打银行(中国)和美 ...

  2. SQL Server移除事务日志后sys.master_files依然存在记录问题

    在SQL Server中移除了事务日志文件后,使用sys.master_files检查时发现,对应的事务日志文件记录信息依然存在sys.master_files里面,只是状态state_desc为OF ...

  3. 二、redis命令简单使用（不区分大小写）

    key  * 查看redis中的所有键(当键的数量较多会影响性能,不建议生产环境中使用) exists  key 判断一个键是否存在,存在返回1,否则返回0 del  key  [key...] 删除 ...

  4. cnzz流量统计

    var regexp=/\.(baidu)(\.[a-z0-9\-]+){1,2}\//ig; var where =document.referrer; if(where.indexOf(" ...

  5. webpack打包nodejs项目（前端代码）

    PS.若本文没有帮到你可以看看我的进阶版点此前往 适用情况 首先说明,此情况不具备普遍性.若你的情况与笔者类似那么希望这篇文章能够帮到你. 我的项目情况是这样的:用node.js做后台,ejs做模板引 ...

  6. 基于HTTP协议的几种实时数据获取技术

    原文链接https://www.cnblogs.com/xrq730/p/9280404.html,作者博客园----五月的仓颉,转载请注明出处,谢谢 HTTP协议 HTTP协议大家都很熟悉了,开始本 ...

  7. Feign源码解析

    1. Feign源码解析 1.1. 启动过程 1.1.1. 流程图 1.1.2. 解释说明 Feign解析过程依赖Spring的初始化,它通过实现ImportBeanDefinitionRegistr ...

  8. PMBook - 上课体会

    一.上课感觉怎么样? 这两天都在培训PMP,第一天提前20分到的,空位很多,挑了第二排坐下,看投影效果挺好.第二天我提前30分钟到教室,中间的位置都坐满了,只能找其他位置了.看来大家积极性提高了很多, ...

  9. 学习ASP.NET Core Razor 编程系列十七——分组

    学习ASP.NET Core Razor 编程系列目录 学习ASP.NET Core Razor 编程系列一 学习ASP.NET Core Razor 编程系列二——添加一个实体 学习ASP.NET ...

  10. jquery快速入门（二）

    jQuery 效果 1.隐藏,显示 1.1显示 hide() 和隐藏 show() 语法:$(selector).hide(speed,callback); $(selector).show(spee ...