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

Question

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

HTML：

#define BOUND 7

int r = (long long)rand() * (BOUND - 1) / (RAND_MAX + 1LL);
if (r >= 1) { // shift values 1..5 to 2..6
    r += 1;
}

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

编辑：尝试将dvMore2设置为// select a random value from a set int set[] = { 0, 2, 3, 4, 5, 6 }; int r = set[(long long)rand() * (sizeof(set) / sizeof(*set)) / (RAND_MAX + 1LL)]; 。还尝试添加占位符范围并将vertical-align设置为center，但它们都没有工作。

Answer 1

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

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

Answer 2

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

＆＃13;

＆＃13;

#dvMore2 * {
  vertical-align: middle;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;