CSS属性：vertical-align:middle,设置为什么无效！

最新推荐文章于 2024-10-06 15:19:29 发布

zlq_csdn

最新推荐文章于 2024-10-06 15:19:29 发布

阅读量2.8k

点赞数 3

分类专栏：前端（HTML+CSS+JS+ES6)

前端（HTML+CSS+JS+ES6) 专栏收录该内容

51 篇文章 0 订阅

订阅专栏

最近，在学习CSS中，每次对一个页面进行排版的时候，总是需要对文字居中，每次在div里面设置text-align和vertical-algin两个属性就会以为他会居中！

图一：

图二：

图三：

这是外面一个div里面在分几个div，我在其中一个中输入文字，但是写了text-align即文字居中和vertical-align垂直居中，以为就会让文字居于正中间，但是却显示如图二的效果！这是为什么呢！所以查找了许多资料，原来vertical-align属性只对行内元素有效，对块内元素无效！而此时就会用到display属性，大家也看到我里面有设置display属性为inline-block属性，确没有效果，那是因为将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内！说的通俗点，就是你设置的当前div属性还是块对象呈递，但是允许同一级别的div在同一行内，也可以设置宽度和高度！所以才会呈现如上图二所示的没有效果！

解决办法：

1.而如果我们将display属性设置为table-cell，将块元素转化为单元格，然后加上vertical-align：middle，就可以了呈现图三的效果了。（温馨提示：但是你们别忘记加text—align属性为center哟！）、

2.或者可以设置行高即line-height，但是要注意，要与div的高度一致！否则也会有偏差的（温馨提示：而display：inline-block是这个）！

补充：在div中让图片垂直水平居中

<style>
   .box{
		width: 100px;
		height: 100px;
		border: 1px solid red;
		text-align: center;
		vertical-align: middle;
		display: table-cell;      /* 必须添加 */
		/*
		方法二：伸缩布局
		display: flex;
		align-items: center;
		justify-content: center;
		*/
   }
</style>
</head>
<body>
	<div class="box">
		<img src="./移动端/imgs/add.png" alt="">
	</div>
	
</body>