链接: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. Jquery_基础(一) 常用方法与选择器

    一.Jquery常用方法: $(function(){ //掌握$() 以及function(){} 结合 $("#a01").click(function(){ alert('h ...

  2. 读了前半本<Thinking in Java>

    读了1-14章.这本书真的不适合初学者,可能比较适合有一两年Java经验的人来读.学习真的是一个螺旋递进的过程.刚开始学Java基本语法,书上看到的很多东西觉得过于细枝末节,没见过,用不上,导致书看不 ...

  3. sql针对某一字段去重,并且保留其他字段

    今天客户提了一个小需求,希望我能提供一条sql语句,帮助他对数据中 _field 这个字段的值去重,并且保留其他字段的数据.第一反应是select distinct,但这种语句在对某个字段去重时,无法 ...

  4. 洛谷 P1914 小书童——密码【字符串+模拟】

    P1914 小书童——密码 题目背景 某蒟蒻迷上了“小书童”,有一天登陆时忘记密码了(他没绑定邮箱or手机),于是便把问题抛给了神犇你. 题目描述 蒟蒻虽然忘记密码,但他还记得密码是由一串字母组成.且 ...

  5. HDU1061-Rightmost Digit-规律题,快速幂

    Rightmost Digit Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)T ...

  6. HDU5137 删点 最短路

    How Many Maos Does the Guanxi Worth Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 512000/5 ...

  7. 使用Android Studio过程中,停留在“Building ‘工程名’ Gradle project info”的解决方法

    http://www.loverobots.cn/in-the-process-of-using-studio-android-the-solution-of-the-project-info-gra ...

  8. HDU 1233 还是畅通工程(模板——克鲁斯卡尔算法)

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=1233 题意描述: 输入n个城镇以及n*(n-1)/2条道路信息 计算并输出将所有城镇连通或者间接连通 ...

  9. 从零开始学习前端开发 — 15、CSS3过渡、动画

    一.css3过渡 语法: transition: 过渡属性 过渡时间 延迟时间 过渡方式; 1.过渡属性(transition-property) 取值:all 所有发生变化的css属性都添加过渡 e ...

  10. 【JSP/Servlet】后台如何获取复选框或可选属性的同名参数

    感觉自己jsp/servlet部分学的太差了--今天突然想到还有这种操作,遂分享之 比如有些时候我们需要使用复选框发送同名数据的时候,后台接收参数是个麻烦事,还有可选属性也是如此 有丰富经验的会想到a ...