Question

我试图将一些SVG元素与SPAN对齐。使用Atom的HTML预览看起来很好，但在Chrome和Safari下，SVG与我无法解释的范围之间存在差距。

http://jsbin.com/pawupu/edit?html,css,output

＆＃13;

* {
  padding:0;
  margin:0;
}

div.digitDiv {
   font-size:10vw;
   font-family: monospace;
   display:inline-block;
   width:1em;
   margin-left:2em;
  border:1px solid red;
  text-align:center;
}

span.digit {
    border:1px solid green;
}

svg {
    border:1px solid blue;
    width: 5vw;
    fill: #000;
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
  <title>SVG, why you no align?</title>
</head>


<body>

<!-- this works! -->
<div class="digitDiv">
  <span class="digit">1</span>
  <span class="digit">2</span>
  <span class="digit">3</span>
</div>

<!-- this doesn't! -->
<div class="digitDiv">
 <svg viewBox="0 0 100 100"><path d="M50,0 100,100 0,100 Z"></path></svg>
 <span class="digit">1</span>
 <svg viewBox="0 0 100 100"><path d="M0,0 100,0 50,100 Z"></path></svg>
</div>


</body>
</html>

＆＃13;

我可以手动修改SVG＆＃39;通过CSS的位置，但我想知道我是否忽略了别的东西。

Answer 1

你的问题 here 有一个非常类似的问题，答案也适用于你。

如链接答案中所述，“SVG是内联的并且位于表格单元格内部”，因此您需要在CSS中为display:block添加svg语句并手动修复水平位置

Answer 2

您可以尝试在.digitDiv中浮动元素。

span.digit {
    border:1px solid green;
    float:left

}

svg {
    border:1px solid blue;
    width: 5vw;
    fill: #000;
    float:left
}

尝试将SVG与HTML元素对齐时出现差距

2 个答案: