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代码，则图片不会居中，如果我将span替换为p标记等任何其他标记，那么同样的问题......

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

Answer 1

vertical-align元素上的

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>

Answer 2

  

CSS中的vertical-align属性控制一行中彼此相邻的元素排列方式。   为了使其工作，需要沿基线设置元素。如在内联（例如）或内联块（例如由显示属性设置）元素。

阅读更多：https://css-tricks.com/almanac/properties/v/vertical-align/

简单来说，vertical-align属性指定位置内联（或内联块）元素之间的关系。

你有一张图片，需要一个像height: 100%;这样的其他元素。 Span元素扮演助手的角色。

span {vertical-align: middle;}和img {vertical-align: middle;}说：中心两个元素必须在同一条线上。

＆＃13;

＆＃13;

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%;

}

.helper {

    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

＆＃13;

<a href="#">

    <span class="helper"></span>
    
    <img class="size-40X40 img-round" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRSJoLHGrCss93oyQO7wXQr02WZbL83EiJFxza5pe-gN3o_jaK7jw">
    
</a>

＆＃13;

＆＃13;

＆＃13;