链接:https://pan.baidu.com/s/1kW1At9d 密码:g0he

  这里说的div是指固定大小的,动态往里面填充文字的时候,文字一直水平垂直居中(换行也是)。就和td标签一样。当然这个demo是针对文字的,如果有人问图片和其他固定大小的盒模型怎么办- -我只能说回去好好学学基础,用“绝对定位”和“相对定位”呀。

  废话不多说,demo在文章顶部,这里写一下代码介绍,此方法实现纯靠CSS:

<style>
.box{width:333px;height: 238px;display: table;}
.cont{vertical-align: middle;display: table-cell;}
h1{font-weight: inherit;font-size: 11px;text-align: center;}
</style>
<div class="box">
<div class="cont">
<h1>一行字一行字一行字一行字</h1>
</div>
</div>

  以上代码是简洁型的代码,具体效果还请下载demo查看。这个盒模型分为三层,最外层的box需要定义宽、高、和display:table。第二层的cont需要定义

vertical-align: middle;display: table-cell;text-align: center;模仿td属性,三个标签的意思分别是:垂直居中,让标签元素以表格单元格的形式呈现(IE8+),水平居中。
最里面的h1标签你就可以随便定义啦,行高、颜色,字体大小。到这里,你就能随便往里面动态生成数据啦,再也不用担心换行或者显示不下的问题了。

div仿td标签属性的更多相关文章

  1. HTML+css基础 表格标签table Table标签属性 td标签属性

    表格标签table:   他是由行与列构成,最小单位是单元格. 行标签  <tr></tr> 单元格标签<td></td> Table标签属性: Bor ...

  2. 全局css控制<td>标签属性

    td { text-align: center; /*设置水平居中*/ vertical-align: middle; /*设置垂直居中*/    height:50px;             / ...

  3. 05-3-style标签属性

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. HTML <td> 标签的 colspan 属性

    HTML <td> 标签的 colspan 属性 实例 表格单元横跨两列的表格: 浏览器支持 所以浏览器都支持 colspan 属性. 没有浏览器支持 colspan="0&qu ...

  5. <td>标签scope属性

    HTML <td> 标签的 scope 属性 HTML <td> 标签 实例 下面的例子把两个 th 元素标识为列的表头,把两个 td 元素标识为行的表头: <table ...

  6. PHP通用的XSS攻击过滤函数,Discuz系统中 防止XSS漏洞攻击,过滤HTML危险标签属性的PHP函数

    XSS攻击在最近很是流行,往往在某段代码里一不小心就会被人放上XSS攻击的代码,看到国外有人写上了函数,咱也偷偷懒,悄悄的贴上来... 原文如下: The goal of this function ...

  7. td标签内的内容过长导致的问题的解决办法

    问题描述:在开发过程中,td标签中的有一个cell格中的内容过长,导致td标签高度增加,从而导致整个页面内容的不协调:

  8. 史上最全的html标签属性用法对照表

    html标签特效代码语法使用对照说明 <!> 跑马灯 <marquee>...</marquee>普通卷动 <marquee behavior=slide&g ...

  9. html标签属性大全

    <marquee>...</marquee>普通卷动 <marquee behavior=slide>...</marquee>滑动 <marqu ...

随机推荐

  1. 强化学习 - Q-learning Sarsa 和 DQN 的理解

    本文用于基本入门理解. 强化学习的基本理论 : R, S, A 这些就不说了. 先设想两个场景:  一. 1个 5x5 的 格子图, 里面有一个目标点,  2个死亡点二. 一个迷宫,   一个出发点, ...

  2. [翻译]QT core wallet manual 狗狗币核心钱包使用教程

    译注:比特币没赶上可以玩狗狗币啊,水电厂包不起可以用CPU挖啊.为了顺应时代潮流,了解一下区(fa)块(heng)链(cai)和加密货币技术,准备从研究狗狗币开始.网上找了一圈没有看到很好的入门级教程 ...

  3. org.eclipse.jdi.TimeoutException:Timeout occurred while waiting for packet 1983.occurred

    eclipse 增大junit内存配置 现象:eclipse在junit测试的时候出现如下错误 org.eclipse.jdi.TimeoutException:Timeout occurred wh ...

  4. CodeForces839-B. Game of the Rows-水题(贪心)

    最近太zz了,老是忘记带脑子... 补的以前的cf,发现脑子不好使...   B. Game of the Rows time limit per test 1 second memory limit ...

  5. android手机安全卫士、Kotlin漫画、支付宝动画、沉浸状态栏等源码

    Android精选源码 轻量级底部导航栏   android手机卫士源码   android实现高仿今日头条源码   一个用Kotlin写的简单漫画App源码   android吐槽项目完整源码   ...

  6. 将电脑文件复制到vm虚拟机中,然后安装步骤

    [root@lixiaohu 桌面]# cp openssl-1.0.1f.tar.gz /usr/src     /usr/src  这是复制到的路径[root@lixiaohu 桌面]# cd / ...

  7. Java Thread wait、notify与notifyAll

    Java的Object类包含了三个final方法,允许线程就资源的锁定状态进行通信.这三个方法分别是:wait(),notify(),notifyAll(),今天来了解一下这三个方法.在任何对象上调用 ...

  8. 有用的linux命令笔记

    date cal [month] [year] bc 计算器 mkdir -p /home/bird/ 连续建立文件夹 mkdir -m 711 test2 创建文件夹是的权限 mv -i 询问是非覆 ...

  9. linux安装navicat全程记录

    国庆期间自己在试着用linux(ubuntu),献上navicat安装方法,以及很多教程里没有写的一些小东西 step1: 去navicat官网下载安装包,网址:http://www.navicat. ...

  10. b2b2c

    编辑 B2B2C是一种电子商务类型的网络购物商业模式,B是BUSINESS的简称,C是CUSTOMER的简称,第一个B指的是商品或服务的供应商,第二个B指的是从事电子商务的企业,C则是表示消费者.   ...