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 ...
随机推荐
- 进行app性能和安全性测试的重要性
如何让用户感觉App运行速度更快呢,这需要对App进行性能测试.限制App性能的因素按照App的系统结构分为App自身和App需要用到的后台服务. 测试App连接网络的速度 一般采用在模拟Mock环境 ...
- deeplearning.ai 人工智能行业大师访谈 Ian Goodfellow 听课笔记
1. Ian Goodfellow之前是做神经科学研究,在斯坦福上了Andrew NG的课之后,Ian决定投身AI.在寒假他和小伙伴读了Hinton的论文,然后搭了一台用CUDA跑Boltzmann ...
- Codeforces Round #409 (rated, Div. 2, based on VK Cup 2017 Round 2)(A.思维题,B.思维题)
A. Vicious Keyboard time limit per test:2 seconds memory limit per test:256 megabytes input:standard ...
- Codeforces 626D Jerry's Protest(暴力枚举+概率)
D. Jerry's Protest time limit per test:2 seconds memory limit per test:256 megabytes input:standard ...
- MFC中菜单的命令响应顺序
响应只可以由Doc,View,MainFrame以及APP四个类完成. 响应顺序是: 点击某菜单项,框架类最先接到菜单命令消息. 框架类把接收到得这个消息交给它的子窗口,即视图类. 视图类根据命令消息 ...
- java实现单链表常见操作
一.概述: 本文主要总结单链表常见操作的实现,包括链表结点添加.删除:链表正向遍历和反向遍历.链表排序.判断链表是否有环.是否相交.获取某一结点等. 二.概念: 链表: 一种重要的数据结构,HashM ...
- 如何在外部终止一个pengding的promise对象
今天在整理前段时间做过的项目,发现之前在集成web环信的时候遇到过一个奇怪的需求:需要终止一个正在进行等待返回的promise,或者阻止其调用resolve和reject.(具体为何会有这种需求我也不 ...
- win7、win10进程pid4占用80端口的解决办法
https://jingyan.baidu.com/article/7e4409533ffe092fc1e2ef10.html 今天想用wamp架设服务器,但是程序启动不起来,查看系统端口,80端口被 ...
- 数据结构与算法(c++)——双缓存队列
"双缓存队列"是我在一次开发任务中针对特殊场景设计出来的结构.使用场景为:发送端持续向接收端发送数据包--并且不理会接收端是否完成业务逻辑.由于接收端在任何情况下停止响应即可能产生 ...
- java垃圾回收的分类
1.线程数 分为串行垃圾回收器和并行垃圾回收器.串行垃圾回收器一次只使用一个线程进行垃圾回收:并行垃圾回收器一次将开启多个线程同时进行垃圾回收.在并行能力较强的 CPU 上,使用并行垃圾回收器可以缩短 ...