vertical-align不生效及解决办法

vertical-align 属性通常用于设置行内元素(如文本)在父元素中的垂直对齐方式。如果它不起作用，可能是因为：

1. 没有给父元素设置高度和行高。
2. 元素不是行内元素，而是块级元素。
3. 样式被其他样式覆盖。
4. 浏览器兼容性问题。

您需要确保父元素有高度和行高，并且将子元素设置为行内元素。检查 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居中

.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的性质改变或者通过其他的方式失效居中，这是总结的内容，喜欢的话点个赞！！！