首页 > > 网页制作 > css >

div仿td标签属性

2018-06-24 02:15:36来源：未知阅读 ()

链接：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标签你就可以随便定义啦，行高、颜色，字体大小。到这里，你就能随便往里面动态生成数据啦，再也不用担心换行或者显示不下的问题了。

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有