在列表元素中对齐 SVG 和 span答案

【问题标题】：Align SVG and span in a list element在列表元素中对齐 SVG 和 span
【发布时间】：2015-10-06 09:31:35
【问题描述】：

我正在尝试将跨度与 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

【问题讨论】：

您是说希望跨度像 SVG 正方形那样垂直居中？如果是这样，您可以像使用 SVG 一样将 vertical-align:middle 添加到跨度中。

标签： html css svg

【解决方案1】：

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

【讨论】：