div仿td标签属性
程序员文章站
2022-06-19 12:30:10
链接:https://pan.baidu.com/s/1kW1At9d 密码:g0he 这里说的div是指固定大小的,动态往里面填充文字的时候,文字一直水平垂直居中(换行也是)。就和td标签一样。当然这个demo是针对文字的,如果有人问图片和其他固定大小的盒模型怎么办- -我只能说回去好好学学基础, ......
链接: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标签你就可以随便定义啦,行高、颜色,字体大小。到这里,你就能随便往里面动态生成数据啦,再也不用担心换行或者显示不下的问题了。
上一篇: 如何定制Kali镜像
推荐阅读
-
有关html的标签以及css属性(border、div)
-
div仿td标签属性
-
有关html的标签以及css属性(border、div)
-
1. 实例演示Ement常用语法 2. 实例演示元素四类属性 3. 实例演示布局标签,并分析div+class与 html5语义化标签的优缺点
-
Ement常用语法、元素四类属性、布局标签、div+class与 html5语义化标签的优缺点
-
1. 实例演示Ement常用语法 2. 实例演示元素四类属性 3. 实例演示布局标签,并分析div+class与 html5语义化标签的优缺点
-
Ement常用语法、元素四类属性、布局标签、div+class与 html5语义化标签的优缺点
-
html小技巧之td,div标签里内容不换行
-
如何在Html的div+css中去除
- 标签前面小黑点,和ul、LI部分属性方法_html/css_WEB-ITnose
-
HTML
标签的 nowrap 属性_html/css_WEB-ITnose