HTML中display属性的属性值有哪些？display属性是怎么实现水平垂直居中的？(2)-木庄网络博客

HTML中display属性的属性值有哪些？display属性是怎么实现水平垂直居中的？

2022-02-21 11:41:11 PHP中文网 JavaScript 百度已收录

这种方法不会像前面的两种方法一样，有高度的限制，此方法可以要据元素内容动态的改变高度，从而也就没有空间的限制，元素的内容不会因为没足够的空间而被切断或者出现难看的滚动条。

缺点：

不足之处呢？这种方法只适合现代浏览器，在IE6-7下无法正常运行。

2.利用display：table-cell进行元素水平垂直居中

结构：

<div class="wrap">
 <div class="box">
  梦幻雪冰
 </div>
</div>

样式：

.wrap {
    display: table-cell;
    width: 400px;
    height: 400px;
    background: #fcf;
    vertical-align: middle;
}
.box {
    width: 200px;
    height: 200px;
    margin: 0 auto;
    background: #999;
}

优点：

这种方法的优点和方法三是一样的，不会有高度的限制。

缺点：

IE6、IE7不支持

【相关推荐】

HTML5中web是什么？web存储中的元素有哪些？

HTML IMG标签的属性是有哪些？了解IMG标签的用法

以上就是HTML中display属性的属性值有哪些？display属性是怎么实现水平垂直居中的？的详细内容，更多文章请关注木庄网络博客！

返回前面的内容

Vue.js 设计与实现基于Vue.js 3 深入解析Vue.js 设计细节

￥83.86元 人民邮电出版社

本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者

转载请注明出处：木庄网络博客 » HTML中display属性的属性值有哪些？display属性是怎么实现水平垂直居中的？

相关推荐

评论