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

HTML中display属性的属性值有哪些？都有什么含义？还有HTML中display属性是怎么实现水平垂直居中的？今天这篇文章给大家介绍HTML中display属性的值，还有HTML中display属性的值是怎么实现水平垂直居中的，介绍了两种方法。

display在这里我说四个最常用的属性值inline、 block、inlin-block、none。

首先我们来说一下inline（n内联元素）：

该属性值为默认值。此元素会被显示为内联元素，元素前后没有换行符。一般不会设置这个属性值。个人理解，其实跟正常的行内元素没什么区别，用的比较多的还是block和inline-block。

接着是block（块级元素）这个属性值：

这个属性值是比较有意思的，设置为块级元素独占一行，就换行来说和p标签的效果一样，但是这个属性值设置后，作为一个块级元素他就具备了宽、高，和别的块级元素的间距margin着属性的设置，还有间距的设置padding，但是不能设置行高（line-height）。

还有inline-block（内联块）这个属性值：

这个属性值是比较强大的，本人刚开始学的时候基本上见到需要设置的只要不是换行的就会设置这个属性值，一来他可以作为块级元素，可以具有block的特性，另一方面，由于本人初学，对于居中的设置比较麻烦，所有使用这个属性值可以设置行高，从而使文字居中，方便易用。

对于这个导航栏的实现这几个属性很好用，主要用到block和inline-block这两个属性值，inline-block作为同一行的几个元素的实现，block做为元素间换行的实现。大家可以试试。

对于最后一个none这个属性值：

个人觉得用于隐藏元素比较方便，做那种鼠标浮动的时候更改display的属性值来达到显示与隐藏元素的效果。

HTML中display一共有哪些比较常用的值呢，让我们一起来看看

HTML中display在通常的项目开发中比较容易被使用的值主要有：

• none（元素不会被显示）;

• block（元素将显示为块级元素，元素前后会带有换行符）;

• inline（元素会被显示为内联元素，元素前后没有换行符）;

• inline-block（行内块元素。CSS2.1 新增的值）;

• table（元素会作为块级表格来显示，类似 f5d188ed2c074f8b944552db028f98a1，表格前后带有换行符）;

• table-row（元素会作为一个表格行显示，类似 a34de1251f0d9fe1e645927f19a896e8）;

• table-cell（元素会作为一个表格单元格显示，类似 b6c5a531a458a2e790c1fd6421739d1c 和 b4d429308760b6c2d20d6300079ed38e）。

• display实现的水平垂直居中！

利用position和margin进行元素水平垂直居中；想必大家还是比较熟悉，经常用的。但不知道你是否使用过display：table与table-cell对元素进行水平垂直居中呢？

以下就是利用display：table-cell进行元素水平垂直居中的的两种方法了：

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

结构：

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

样式：

.wrap {
    /*让元素以表格形式渲染*/
    display: table;
    height: 400px;
    width: 400px;
    background: #fcf;
}
.box {
    /*让元素以表格的单元素格形式渲染*/
    display: table-cell;
    /*使用元素的垂直对齐*/
    vertical-align: middle;
}
.con {
    width: 200px;
    height: 200px;
    margin: 0 auto;
    background: #999;
}

优点：

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

缺点：

不足之处呢？这种方法只适合现代浏览器，在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属性是怎么实现水平垂直居中的？的详细内容。更多信息请关注PHP中文网其他相关文章！