div仿td标签属性
链接: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标签属性的更多相关文章
- HTML+css基础 表格标签table Table标签属性 td标签属性
表格标签table: 他是由行与列构成,最小单位是单元格. 行标签 <tr></tr> 单元格标签<td></td> Table标签属性: Bor ...
- 全局css控制<td>标签属性
td { text-align: center; /*设置水平居中*/ vertical-align: middle; /*设置垂直居中*/ height:50px; / ...
- 05-3-style标签属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- HTML <td> 标签的 colspan 属性
HTML <td> 标签的 colspan 属性 实例 表格单元横跨两列的表格: 浏览器支持 所以浏览器都支持 colspan 属性. 没有浏览器支持 colspan="0&qu ...
- <td>标签scope属性
HTML <td> 标签的 scope 属性 HTML <td> 标签 实例 下面的例子把两个 th 元素标识为列的表头,把两个 td 元素标识为行的表头: <table ...
- PHP通用的XSS攻击过滤函数,Discuz系统中 防止XSS漏洞攻击,过滤HTML危险标签属性的PHP函数
XSS攻击在最近很是流行,往往在某段代码里一不小心就会被人放上XSS攻击的代码,看到国外有人写上了函数,咱也偷偷懒,悄悄的贴上来... 原文如下: The goal of this function ...
- td标签内的内容过长导致的问题的解决办法
问题描述:在开发过程中,td标签中的有一个cell格中的内容过长,导致td标签高度增加,从而导致整个页面内容的不协调:
- 史上最全的html标签属性用法对照表
html标签特效代码语法使用对照说明 <!> 跑马灯 <marquee>...</marquee>普通卷动 <marquee behavior=slide&g ...
- html标签属性大全
<marquee>...</marquee>普通卷动 <marquee behavior=slide>...</marquee>滑动 <marqu ...
随机推荐
- Hadoop(十六)之使用Combiner优化MapReduce
前言 前面的一篇给大家写了一些MapReduce的一些程序,像去重.词频统计.统计分数.共现次数等.这一篇给大家介绍的是关于Combiner优化操作. 一.Combiner概述 1.1.为什么需要Co ...
- 51nod 1575 Gcd and Lcm
题目链接:http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1575 万年巨坑终于填掉了…… 首先是煞笔西瓜的做题历程O_O. ...
- “玲珑杯”ACM比赛 Round #19题解&源码【A,规律,B,二分,C,牛顿迭代法,D,平衡树,E,概率dp】
A -- simple math problem Time Limit:2s Memory Limit:128MByte Submissions:1599Solved:270 SAMPLE INPUT ...
- [bzoj1826] [JSOI2010]缓存交换
虽然不知道为什么..但显然,每次扔掉离下次查询最远的内存单元就行了233 用堆来维护贪心...(优先队列大法好 #include<cstdio> #include<iostream& ...
- 关于JAVA实现二维码以及添加二维码LOGO
今天在公司,完成了之前的任务,没有什么事做,就想鼓捣一下二维码,因为之前没有接触过,我就去翻看了几本书,也基本完成了二维码的实现,以及添加二维码的LOGO. 现在绘制二维码一般都使用的是谷歌的zxin ...
- RPM挂载光盘(使用iso里面的来搭建yum环境)就是离线模式,
找到光盘的完整路径名.在命令行输入:ls -l /dev | grep cdrom. 可以看到光盘的名字叫做:cdrom1.然后在命令行执行: mount /dev/cdrom1 /mnt/ ...
- css3渐变之线性渐变
css3定义了两种类型的渐变,即线性渐变和径向渐变.这里我要说的是线性渐变. 为了创建一个线性渐变,你必须至少定义两种颜色结点.颜色结点即你想要呈现平稳过渡的颜色.同时,你也可以设置一个起点和一个方向 ...
- Oracle_基本函数查询综合
Oracle_基本函数查询综合 --[1]查询出每各月倒数第三天受雇的所有员工 select; --[2]找出早于30年前受雇的员工 select>; select; select; ...
- 微信小程序:微信登陆(ThinkPHP作后台)
https://www.jianshu.com/p/340b1ba5245e QQ截图20170320170136.png 微信小程序官方给了十分详细的登陆时序图,当然为了安全着想,应该加上签名加 ...
- SQL语句order by两个字段同时排序。
ORDER BY 后可加2个字段,用英文逗号隔开.理解:对两个字段都排序,并不是之排序其中的一个字段: f1用升序, f2降序,sql该这样写 ORDERBY f1, f2 DESC 也可以这样 ...