HTML中显示属性的属性值是什么？这是什么意思？以及HTML中的显示属性是如何水平居中和垂直居中的？今天这篇文章介绍HTML中display属性的值以及HTML中display属性的值如何水平居中和垂直居中，并介绍两种方法。
在这里显示四个最常用的属性值inline、block、inlin-block和none。
首先来说说内联:
该属性值是默认值。此元素将显示为内嵌元素，前后没有换行符。通常不设置该属性值。个人理解，其实和正常的行内元素没什么区别，更常用的是block和inline-block。
后跟block的属性值:
这个属性值挺有意思的。设置一个块级元素独占一行，在换行符方面和P标签的效果是一样的，但是设置了这个属性值之后，作为一个块级元素，有了宽度和高度的属性设置，有了与其他块级元素的间距边距，有了间距设置填充，但是行高不能设置。
和内联块的属性值:
这个属性值比较强大。刚开始学的时候，基本上看到这个属性值只要不是换行符就会被设置。一方面，它可以作为块级元素，可以具有块的特性。另一方面，因为我是初学者，设置居中比较麻烦，所以可以用这个属性值设置行高，让文字居中，方便使用。
对于这个导航栏的实现，这些属性非常容易使用，主要使用两个属性值，block和inline-block。inline-block用作同一行中几个元素的实现，block用作元素间换行符的实现。你可以试试。
对于none的最后一个属性值:
个人认为隐藏元素更方便。鼠标浮动时，改变display的属性值，达到显示和隐藏元素的效果。
HTML中常用的显示值有哪些？让我们来看看。
在一般项目开发中容易使用的HTML中的显示值主要包括:
使用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属性的属性值。属性值是什么？显示属性如何水平和垂直居中？更多详情，请关注AdminJS.cn其他相关文章！
adminjs.cn是一个以CSS、JavaScript、Vue、HTML为核心的前端开发技术网站。我们致力于为广大前端开发者提供专业、全面、实用的前端开发知识和技术支持。 在本网站中，您可以学习到最新的前端开发技术，了解前端开发的最新趋势和最佳实践。我们提供丰富的教程和案例，让您可以快速掌握前端开发的核心技术和流程。 Adminjs.cn还提供一系列实用的工具和插件，帮助您更加高效地进行前端开发工作。我们提供的工具和插件都经过精心设计和优化，可以帮助您节省时间和精力，提升开发效率。 在Adminjs.cn中，您可以找到您需要的一切前端开发资源，让您成为一名更加优秀的前端开发者。欢迎您加入我们的大家庭，一起探索前端开发的无限可能！