兼容性：不兼容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. Linux stat函数和stat命令

    stat函数和stat命令 linux文件里的[inode = index node]解释:要理解inode必须了解磁盘和[目录项],inode实际是连接[目录项]和磁盘的中间物质. 图里的大圈代表硬 ...

  2. REST API disable / enable service auto start by API

    how to disable service auto start by API as the following how to enable service auto start by API as ...

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

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

  4. 积极参与开源项目，促进.NET Core生态社区发展

    今天早上在微信群里聊天聊到百度的SDK 已经支持.NET Core, 百度已经在3月份就支持了,想起当时还是我在他们的github上提的issue: https://github.com/Baidu- ...

  5. 【死磕 Spring】----- IOC 之 获取验证模型

    原文出自:http://cmsblogs.com 在上篇博客[死磕Spring]----- IOC 之 加载 Bean 中提到,在核心逻辑方法 doLoadBeanDefinitions()中主要是做 ...

  6. AutoHotkey 自动化脚本工具实例

    AHK 自动按键工具 https://www.autohotkey.com/ 可实现功能 快捷键 启动 浏览器.CMD命令.弹出框 可定时执行任务 可改键 将A与B互换 可快捷替换字符串 测试如下: ...

  7. .NET之微信消息模板推送

    最近在项目中使用到了微信消息模板推送的功能,也就是将对应的消息推送到对应的用户微信上去,前提是你必须要有一个微信公众号并且是付费了的才会有这个功能,还有就是要推送的用户必须是的关注了你的微信公众号的. ...

  8. 微信小程序报错，不在以下 request 合法域名列表中（引起的探索）

       最近因为突然对小程序有兴趣,然后开始了自学之旅.     在学习的过程当中遇到了一个问题,控制台报错,提示:不在以下 request 合法域名列表中,如下图所示 然后我就开始了搜索之旅,相对觉得 ...

  9. 制作联动时，数据绑定combox控件会触发SelectedIndexChanged事件

    看过很多个网站的解决办法,基本雷同,还不能解决,真怀疑他们是互相直接炒的,没事通过验证. 在做省市区的三级联动时候出现这个问题,最后通过先设置值对象和显示对象,最后才绑定数据,这样一个逻辑操作,什么问 ...

  10. .net简介（一）

    什么是.NET 微软的开发平台,包含规范.编程语言.标准类.工具等.一般认为.net就是微软的软件开发技术.同时微软的所有产品也提供.NET类型的API. .NET概览 .net的组成: 开发语言,遵 ...