Question

我正在学习SVG并从这里获得一些帮助。这是我的代码：http://jsfiddle.net/C8d34/6/

<svg viewBox="0 0 100 100"> /* this here */
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

如何对齐我的圆圈使其在蓝色框内水平对齐并垂直对齐底部。我认为这与某事有关：

x="50" y="0"

但是我没有运气，它仍然没有坐在正确的地方。

Answer 1

svg {
    height: 50%;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    width: 50%;
}

试试这个。小提琴http://jsfiddle.net/C8d34/10/

Answer 2

svg {
vertical-align: middle;
display:inline-block;
}

在父级内对齐SVG

2 个答案: