如何在div内垂直居中span / svg

Question

小提琴： https ： //jsfiddle.net/6yfv3u5m/

HTML：

<div id="dvMore">
    <div id="dvMore2">
        <span id="spMore">View More</span>
        <svg style="width:24px;height:24px" viewBox="0 0 24 24"><path fill="#000000" d="M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z"></path></svg>
    </div>
</div>

我没有高度，只有动态内容。

编辑：尝试将dvMore2设置为vertically-align: center 。 还尝试添加占位符范围并将vertical-align设置为center但它们都不起作用。

Answer 1

添加display: flex; align-items: center;

https://jsfiddle.net/6yfv3u5m/1/

Answer 2

使用如下所示的vertical-align属性。 您需要在子项上设置它，而不是父项本身：

 #dvMore2 * { vertical-align: middle; } 

 <div id="dvMore"> <div id="dvMore2"> <span id="spMore">View More</span> <svg style="width:24px;height:24px" viewBox="0 0 24 24"><path fill="#000000" d="M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z"></path></svg> </div> </div>