在列表元素中对齐SVG和span

Question

我正在尝试将跨度与svg图像对齐，但我正在努力。 Code和Codepen应该是自我解释的。

HTML

<ul>
  <li>
    <svg>*SVG-CODE*</svg><span>Align me</span>
  </li>
</ul>

CSS

ul {
  margin-left: 50px;
  margin-top: 50px;
  background: orange;
}

li {
  background: blue;
}

svg {
  vertical-align: middle;
  margin-right: 20px;
  height: 200px;
  background: green;
  alignment-baseline: central;
}

span {
  background: red;
  font-size: 100px;
}

完整代码：http://codepen.io/andreash/pen/zvwZjv

Answer 1

啊，我今天的脑子很慢。我需要垂直对齐：中间到svg和span。谢谢@AndyFurniss