• 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. kindeditor富文本编译器

    一.网址 kindeditor.net/about.php 二.编辑器的使用,看官方文档 三.常用初始化参数 1.resizeType2或1或0,2时可以拖动改变宽度和高度,1时只能改变高度,0时不能 ...

  2. IDEA新建maven项目没有webapp目录解决方法

    转载地址:https://www.cnblogs.com/oldzhang1222/p/10429827.html 先创建的页面修改路径 修改路径如下 添加并完善路径\src\main\webapp ...

  3. vwmare 十月第　１　弹

    step one 不管 是 ubuntu 还是 win vm tools 都是需要在虚拟的系统里面的去安装的. 这一点是相同的.

  4. 学习 lind api 十月 第5弹

    继续 四弹里的 自定义的api response message 但是 那上面的 那些值得也是包含

  5. typescript step by step

    如果有本 typescript的书 这个名字不错 啊 step one

  6. 从零开始ming的多人联机游戏--游戏客户端（1）六边形地图

    打算做的小游戏是一个多人联机的策略类游戏,类似于<文明>那种 游戏的玩法并不确定,开这个坑主要是为了入门后端开发,顺便熟悉下游戏开发 这篇文章使用unity,实现了六边形单元地图的创建.后 ...

  7. 团队项目——Alpha发布1

    这个作业属于哪个课程 https://edu.cnblogs.com/campus/xnsy/GeographicInformationScience/homework 这个作业要求在哪里 https ...

  8. 源码详解系列(七) ------ 全面讲解logback的使用和源码

    什么是logback logback 用于日志记录,可以将日志输出到控制台.文件.数据库和邮件等,相比其它所有的日志系统,logback 更快并且更小,包含了许多独特并且有用的特性. logback ...

  9. 用CSS实现横向滚动条

    在进行app制作时,需要使用横向滚动条是内容展示更完善 首先,这是html代码: 这是CSS代码: 要点: 设置显示内容的宽 white-space是防止内容自动折行 overflow-y设置为hid ...

  10. [CCPC2019 ONLINE]H Fishing Master

    题意 http://acm.hdu.edu.cn/showproblem.php?pid=6709 思考 先考虑所有鱼的烹饪时间小于k的情况.将T从大到小排序后,煮一条鱼相当于将其时间补齐至k. 由于 ...