vertical-align 属性通常用于设置行内元素(如文本)在父元素中的垂直对齐方式。如果它不起作用，可能是因为：
- 没有给父元素设置高度和行高。
- 元素不是行内元素，而是块级元素。
- 样式被其他样式覆盖。
- 浏览器兼容性问题。
您需要确保父元素有高度和行高，并且将子元素设置为行内元素。检查 CSS 代码是否有冲突或兼容性问题，并在最新版本的浏览器上测试。
1.在父元素中增加display:table-cell，vertical-align 写在在父元素中
.btn{
display: table-cell;
width: 200px;
height: 200px;
border: 1px solid #eee;
text-align: center;
vertical-align: middle;
}
.btn img{
width: 100px;
}
<div class="btn">
<img src="img/sh.png">
</div>2.在父元素中增加空的span元素，并设置其高度为100%，vertical-middle居中文章来源：https://www.toymoban.com/news/detail-552297.html
.btn{
width: 200px;
height: 200px;
border: 1px solid #eee;
text-align: center;
}
.btn span{
display: inline-block;
vertical-align:middle;
height: 100%;
}
.btn img{
width: 100px;
vertical-align: middle;
}
<div class="btn">
<span></span>
<img src="img/sh.png">
</div>3.父元素line-height 100% 和子元素vertical-align:middle
.btn{
width: 200px;
height: 200px;
line-height: 200px;
text-align: center;
border: 1px solid #eee;
}
.btn img{
vertical-align: middle;
width: 100px;
}
<div class="btn">
<img src="img/sh.png">
</div>4.采取display:flex居中
.btn{
width: 200px;
height: 200px;
border: 1px solid #eee;
display: flex;
justify-content:center;
align-items: center;
}
.btn img{
width: 100px;
}
<div class="btn">
<img src="img/sh.png">
</div>5.绝对定位
.btn{
width: 200px;
height: 200px;
border: 1px solid #eee;
position: relative;
}
.btn img{
width: 100px;
height: 100px;
position: absolute;
left: 50%;
top:50%;
margin-left: -50px;
margin-top: -50px;
}
<div class="btn">
<img src="img/sh.png">
</div>6.背景图
.btn{
width: 200px;
height: 200px;
border: 1px solid #eee;
background-image: url(img/sh.png);
background-size: 50% 50%;
background-position: center center;
background-repeat: no-repeat;
}
<div class="btn">
</div>总结：失效的原因一般是因为元素的display的性质，以及父级没有给高度导致，改变display的性质改变或者通过其他的方式失效居中，这是总结的内容，喜欢的话点个赞！！！文章来源地址https://www.toymoban.com/news/detail-552297.html
到了这里，关于vertical-align不生效及解决办法的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
