• table-cell默认宽高由内容决定
    <style type="text/css" rel="stylesheet">

        .content {

            color: white;

        }

        .cell {

            background-color: blue;

            display: table-cell;

        }

    </style>

    <div class="content">

        <div class="cell">

            test

        </div>

    </div>
  • 可以设置固定宽高：
 .cell {

            background-color: blue;

            display: table-cell;

            width: 100px;

            height: 100px;

        }
  • 直接设置宽高百分比是无效的，因为table没有显式声明，默认加的table宽高也是由内容决定，所有要使用百分比，必须显式声明table并定义宽高（row默认充满table）
<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>cell</title>

</head>

<body>

    <style type="text/css" rel="stylesheet">

        .content {

            color: white;

        }

        .table {

            display: table;

            width: 100%;

            height: 200px;

        }

        .cell {

            background-color: blue;

            display: table-cell;

            width: 100%;

            height: 100%;

        }

    </style>

    <div class="content">

        <div class="table">

            <div class="cell">

                test

            </div>

        </div>

    </div>

</body>

</html>
  • cell里的内容水平居中
.cell {

            background-color: blue;

            display: table-cell;

            width: 100%;

            height: 100%;

            text-align: center;

        }
  • cell里的内容垂直居中：
 .cell {

            background-color: blue;

            display: table-cell;

            width: 100%;

            height: 100%;

            text-align: center;

            vertical-align: middle;

        }

注意：设置 line-height: 100%;无效，无法让文字垂直居中,设置 line-height: 200px;也可以垂直居中

table-cell设置宽高、居中的更多相关文章

  1. <canvas>设置宽高遇到的问题

    在使用<canvas>元素时必须设置宽度和高度,指定可以绘画的区域大小.但是这里设置宽度和高度的时候有一个小问题. 样例代码: <!DOCTYPE html> <html ...

  2. 关于“float”的一次探索--遇到了一个span元素可以设置宽高引发的思考

    起初,这个问题和float还有设置宽高之间是没有任何关联的,一开始这是一个关于height和line-height的问题,目的是为了探究一下这两者之间的关系,但是在学习的过程中,我翻之前写的代码,发现 ...

  3. 第4天：JS入门-给div设置宽高背景色

    今天学习了js入门课程,听的不多,做了个小练习,给div设置宽高.背景色.一点点都是进步.核心代码如下: <!DOCTYPE html><html lang="en&quo ...

  4. 在一个没有设置宽高的容器中,为什么设置position:absolute后就可以全屏显示了?

    此场景适用于移动端百分比布局,背景全屏显示. 在一个没有设置宽高的容器中设置背景,想要背景全屏显示,设置bcakground-size:100%;后还需设置position:absolut; 原因: ...

  5. a标签什么时候可以设置宽高

    行内元素(如a标签),在文档流中的时候因为是行内元素所以无法设置宽高:而当设置了绝对定位或者浮动,会生成块框(即变成块元素),所以就可以设置宽高了

  6. frame方式布局一段文子，设置宽高

    计算一段文字的宽高 /** * 计算一段文字的宽高 * * @param size 这段文字的最大宽高 * @param options NSStringDrawingUsesLineFragment ...

  7. android下载网络图片，设置宽高，等比缩放

    使用Picasso组件去下载图片会发现图片宽高会变形不受等比缩放控制,即使设置了图片的 scaleType,可能是对Picasso的api没有用对, Picasso.with(this.activit ...

  8. java压缩图片设置宽高

    package html2pdf_2; import java.awt.Image; import java.awt.image.BufferedImage; import java.io.File; ...

  9. 安卓模拟器"bluestacks"在电脑上的设置.(宽,高)

    可以在手机上找到大量英语学习APP. 习惯使用电脑的朋友,可以安装模拟器来使用这些APP. bluestacks 是一款比较好的模拟器. 但其默认的宽,高,却无法在软件中修改. 找到一个比较好的教程来 ...

随机推荐

  1. threding.local

    作用:为每一个线程开辟一个独立的内存空间 示例 from threading import Thread, local import time obj = local() def test(i): o ...

  2. OpenCV2.4.13+VS2013配置方法

    先说一下vc几代表的对应版本: vc8 = Visual Studio 2005 vc9 = Visual Studio 2008 vc10 = Visual Studio 2010 vc11 = V ...

  3. 多线程之CountDownLatch的用法及原理笔记

    前言-CountDownLatch是什么? CountDownLatch是具有synchronized机制的一个工具,目的是让一个或者多个线程等待,直到其他线程的一系列操作完成. CountDownL ...

  4. 017.Python函数匿名函数

    匿名函数 lambda表达式 lambda表达式 : 用一句话来表达只具有返回值的函数,简单,方便,直截了当 # 语法: lambda 参数 : 返回值 无参数的lambda 表达式 def func ...

  5. 利用jQuery动态添加input输入框，并且获取他的值

    动态添加 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEnco ...

  6. Flutter 入门 --- 内部分享

    八月部门给分配的分享任务,由于项目太赶,推迟一个月. 选 Flutter 这个主题,是因为现在它慢慢流行起来了,而我却不了解,故而借此契机,上手试试. 简介 Flutter 是 Google 推出的跨 ...

  7. python 利用selenium爬取百度文库的word文章

    今天学习如何使用selenium库来爬取百度文库里面的收费的word文档 from selenium import webdriver from selenium.webdriver.common.k ...

  8. ubuntu16.04+Pangolin安装

    学习视觉Slam十四讲到第三章的可视化演示的时候需要Panglolin的使用,因此在Githup上下载了安装包:https://github.com/stevenlovegrove/Pangolin ...

  9. Jmeter源码编译缺bouncycastle包

    Jmeter源码下载后install没问题,运行newDrive时会包包不存在,因为下载时缺少三个包没下载成功,点击链接下载并放到lib目录下即可 下载

  10. HDU_1864_01背包

    http://acm.hdu.edu.cn/showproblem.php?pid=1864 题目好像是输入的数据都是两位小数,先统计能报销的发票,然后把小数*100变成成熟就是01背包问题了. #i ...