链接: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. flask_session_源码剖析

    开始文件(部分): from flask import Flask,request,session app = Flask(__name__) app.secret_key = 'sdfsdfsd' ...

  2. Git分支-分支简介

    源地址:https://git-scm.com/book/zh/ch3-1.html 几乎所有的版本控制系统都以某种形式支持分支. 使用分支意味着你可以把你的工作从开发主线上分离开来,以免影响开发主线 ...

  3. ubuntu终端执行shell脚本报command not found解决方法

    使用sudo执行脚本报错:sudo: myshell.sh: command not found 原因:发生这种情况的原因是因为您正在尝试执行的脚本需要正确的权限 解决:执行sudo chmod a+ ...

  4. [国嵌笔记][024][ARM汇编编程概述]

    汇编程序用途 1.在bootloader与内核初始化时,还没有建立C语言运行环境,需要用到汇编程序 2.在对访问效率要求很高的情况下,需要用到汇编程序 ARM汇编分类 1.ARM标准汇编:适合于Win ...

  5. css3渐变之径向渐变

    径向渐变由它的中心定义.可以指定渐变的中心.形状(原型或椭圆形).大小.默认情况下,渐变的中心是 center(表示在中心点),渐变的形状是 ellipse(表示椭圆形),渐变的大小是 farthes ...

  6. Flask连接数据库打怪升级之旅

    一.前言 在初学 Flask 的时候,在数据库连接这部分也跟每个初学者一样.但是随着工作中项目接手的多了,代码写的多了,历练的多了也就有了自己的经验和技巧.在对这块儿代码不断的进行升级改造后,整理了在 ...

  7. 织梦中data文件夹是存放什么内容的

    dede(织梦)的data文件夹下的文件及文件夹也不少,我们来一个一个的介绍下. 1. admin文件夹 admin文件夹 管理员用到的文件夹,一般是后台的配置文件. 第一个文件,idc.txt 配置 ...

  8. 7系列高速收发器总结 GTP IP核使用篇

    上一篇7系列收发器博文讲解了GTP IP核的基本配置,本文继续分析如何将它使用起来.生成IP核后打开example design,先看看工程中包含的文件结构. 顶层文件下包含了gtp ip核系统顶层文 ...

  9. 如何用Safari联调Hybrid APP

    随着Hybrid APP的流行,对其调试变得必不可少.使用Xcode我们能看到的仅仅是WebView,要想进一步查看里面的a标签.button和其他元素,Xcode是心有余而力不足.但是不用担心,Sa ...

  10. scrapy_简介页面和详情页面

    如何对提取的URL进行限定? 往上找id和class属性值,进行多次层级选择,进行内容限定 如何实现获取主页所有urls,然后交给scrapy下载后并解析详情页面,返回结果?(文章简介页面和文章详细页 ...