兼容性：不兼容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. Git常用简介

    Git是什么 git是目前最先进的分布式版本控制系统,它的核心架构如下图所示,分为四个核心区域.git的常用命令主要是关于这四个区域. 本地工作区-work 本地工作区就是我们实际电脑中的文件夹以及文 ...

  2. 转://IO的基础概念

    磁盘IO.网络IO 对磁盘的每个IO就是在磁盘与一些RAM单元之间相互传送一些相邻的扇区的内容.   磁盘IO延时(IO Latency):         也称为IO响应时间,是指内核对磁盘发出一个 ...

  3. Re:Unity游戏开发有哪些让你拍案叫绝的技巧？

    这是我在知乎一个问题: <Unity游戏开发有哪些让你拍案叫绝的技巧?> 下面的回答,觉得蛮有趣的,贴在这里和博客的朋友们分享下. ----- 分享一个比较好玩的内容吧. 大家都知道Uni ...

  4. Netty1：初识Netty

    为什么使用Netty Netty是业界最流行的NIO框架之一,它的健壮性.功能.性能.可定制性.可扩展性在同类框架中都是首屈一指的,它已经得到了成百上千的商用项目的证明.对于为什么使用Netty这个话 ...

  5. java虚拟机内存区域

    java虚拟机运行时数据 程序计数器 是一块较小的内存空间,属于线程私有的内存. 用来记录正在执行的虚拟机字节码指令的地址. 每个线程都需要一个独立的程序计数器,各个线程间的计数器互不影响,独立存储. ...

  6. 来一波C#发送邮件

    1.所用工具和资源:VS2012   在.NET Frameword类库中提供SmtpClient类(System.NET.Mail) 2.运行截图 3.具体代码实现如下: using System; ...

  7. ajax的请求步骤！每个状态值表示什么？

    什么是是ajax ! AJAX即"Asynchronous JavaScript and XML"(异步的JavaScript与XML技术),指的是一套综合了多项技术的浏览器端网页 ...

  8. synchronized的四种作用域以及不能被继承解析

    synchronized是java中用于同步的关键字,其典型的作用域如下所示. 1 对象锁 @Slf4j public class SynchronizedExample1 { private fin ...

  9. eclipse升级Android SDK Tool版本到25.2.5后运行项目报错Unable to build: the file dx.jar was not loaded from the SDK folder

    概述 由于最近通过SDK-Manager更新了build-tools,当要用到dx.jar这个包时,自动调用最新版本Android SDK build-tools中dx.jar,但是运行android ...

  10. 如何大幅提升web前端性能之看tengine在大公司架构实践

    在一个项目还是单体架构的时候,所有的js,css,image都会在一个web网站上,看起来并没有什么问题,比如下面这样: 但是当web网站流量起来的时候,这个单体架构必须要进行横向扩展,而在原来的架构 ...