html - CSS垂直对齐仅在给定跨度时才起作用

Question

a {
    display: block;
    padding: 0 10px;
    /* background: rgba(0,0,0,0.5); */
    height: 100%;
    border-left: 1px solid rgba(0,0,0,0.1);
    text-decoration: none;
    color: white;
    background-color:rgba(0,0,0,0.5);
    height:100px;
}

img {
    max-height: 72px;
    max-width: 598;
    margin: 0;
    padding: 0;
        vertical-align: middle;
            width: 40px;
    height: 40px;
        border-radius: 50%;

}

.img_frame {
    display: inline-block;
    vertical-align: middle;
    height: 100%;
        background-color: black;

}

<a href="">
  <span class="img_frame"></span>
  <img class="size-40X40 img-round" src="https://yt3.ggpht.com/-zvxnrUIYjg8/AAAAAAAAAAI/AAAAAAAAAAA/vnVVaPAvxOE/s900-c-k-no-mo-rj-c0xffffff/photo.jpg">  
</a>

如果我删除 span 标签，图像不会居中，如果我用 p 标签等任何其他标签替换 span，也会出现同样的问题。 .

请解释一下这些属性...提前致谢

Answer 1

vertical-align on inline/inline-block 元素、图像、文本...将元素对齐在一起，而不是与父元素对齐。，
您可以使用flexbox 为此，请检查下面更新的代码片段..

a{
    display: block;
    padding: 0 10px;
    /* background: rgba(0,0,0,0.5); */
    height: 100%;
    border-left: 1px solid rgba(0,0,0,0.1);
    text-decoration: none;
    color: white;
    background-color:rgba(0,0,0,0.5);
    height:100px;
    display: flex;
    align-items: center;
}
img{
    max-height: 72px;
    max-width: 598;
    margin: 0;
    padding: 0;
        vertical-align: middle;
            width: 40px;
    height: 40px;
        border-radius: 50%;

}

.img_frame {
    display: inline-block;
    vertical-align: middle;
    height: 100%;
        background-color: black;

}

<a href="">
  
  <img class="size-40X40 img-round" src="https://yt3.ggpht.com/-zvxnrUIYjg8/AAAAAAAAAAI/AAAAAAAAAAA/vnVVaPAvxOE/s900-c-k-no-mo-rj-c0xffffff/photo.jpg">  
</a>