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 ...
随机推荐
- java自定义注解知识实例及SSH框架下,拦截器中无法获得java注解属性值的问题
一.java自定义注解相关知识 注解这东西是java语言本身就带有的功能特点,于struts,hibernate,spring这三个框架无关.使用得当特别方便.基于注解的xml文件配置方式也受到人们的 ...
- Machine Learning - week 4 - Non-linear Hypotheses
为什么计算机图像识别很难呢?因为我们看到的是汽车,而计算机看到的是表示颜色的 RGB 数值.计算机需要根据这些数值来判断. 如果图片是 50 * 50 像素,那么一共有 2500 个像素点.如果是 Q ...
- zoj 3494:BCD Code
Description Binary-coded decimal (BCD) is an encoding for decimal numbers in which each digit is rep ...
- 【Git】Git基础操作
repository:版本库又名仓库,可以简单理解成一个目录,这个目录里面的所有文件都可以被Git管理起来,每个文件的修改.删除,Git都能跟踪,以便任何时刻都可以追踪历史,或者在将来某个时刻可以&q ...
- DALI 2.0解码模块
DALI2.0调光解码模块使用手册 一.概述(联系人:张先生,电话:13923882807,QQ:813267849) 欢迎使用本公司的DALI 2.0解码模块,该模块支持"DALI第二套协 ...
- TCP三次握手和四次挥手过程
1.三次握手 (1)三次握手的详述 首先Client端发送连接请求报文,Server段接受连接后回复ACK报文,并为这次连接分配资源.Client端接收到ACK报文后也向Server段发生ACK报文, ...
- python中强大的format函数
自python2.6开始,新增了一种格式化字符串的函数str.format(),此函数可以快速处理各种字符串.语法 它通过{}和:来代替%. 请看下面的示例,基本上总结了format函数在python ...
- ClassLoader.getResourceAsStream() 与 Class.getResourceAsStream()的区别
Class.getResourceAsStream() 会指定要加载的资源路径与当前类所在包的路径一致. 例如你写了一个MyTest类在包com.test.mycode 下,那么MyTest. ...
- glusterfs 步骤
一.下载yum源 # wget http://download.gluster.org/pub/gluster/glusterfs/3.6/LATEST/CentOS/glusterfs-epel.r ...
- linux_文件权限
权限贯穿linux整个系统 创建文件或目录,属主和组都是当前用户 linux权限位? 9位基础权限位, 3位一组,总共12位权限 用户对文件权限,相当于你的笔记本 r 读 4 w ...