垂直对齐不起作用

Question

我知道这已被问了一千次，但我发现没有简单的解决方案：

我确实有几次代码

<li>
    <a href="#">
        <img src="image_1.png">
        <span>Name 1</span>
    </a>
</li>

我想垂直地证明span和img-element。因此我做了

li span, li img{
    display:block;
    margin:auto 10px;
}

li img{
    width:20%;
    height:auto
}

但根本没有效果。那我该怎么办？ 我还能做什么？

Answer 1

您可以使用flexbox实现此目的：这是您正在寻找的

＆＃13;

＆＃13;

li span, li img{
    display:block;
    margin:0 10px;
}

li img{
}

a {
  display: flex;
  align-items: center;
}

＆＃13;

<li>
    <a href="#">
        <img src="http://via.placeholder.com/350x150">
        <span>Name 1</span>
    </a>
</li>

＆＃13;

＆＃13;

＆＃13;