居中一个div内的SVG

-1

我想在一个位置内显示一个SVG图像：fixed div。我有居中一个div内的SVG

<div class="main"> 
    <svg class="svg" viewBox="0 0 180 100"> 
    <rect height="100%" width="100%" fill="#003300"></rect> 
    </svg> 
</div>

和风格

.main { 
    position:fixed; 
    left: 100px; 
    height: 100%; 
    width:100%; 
    background: #33AAAA; 
} 

.svg { 
    display: block; 
    height: 100%; 
    width: 100%; 
    position:static; 
}

我想水平和垂直居中SVG。我有一个奇怪的行为。改变浏览器窗口的大小，显示当svg小于可用宽度时，它被奇怪地放置。例如：左侧的空间比右侧的空间多。

Codepen（包括CSS复位）：Codepen

来源

2017-06-06 Paolo

您已离开：100px;在主要类。这就是为什么你的左边是空的。 – AMH

这不是重点。我想把深绿色的长方形放在浅色中。也许左边有事要做... – Paolo

答案可能在那里https://stackoverflow.com/questions/41822510/center-an-svg-inside-a-div？rq = 1我正在测试它 – Paolo

你的宽度设置为100％，则100像素将其移动过。宽度仍然按照100％宽度计算。按照你想要的方式居中，你需要从宽度中减去100px或者以不同的方式嵌套。

.main { 
    position:fixed; 
    left:100px; 
    height: 100%; 
    width:calc(100% - 100px); 
    background: #33AAAA; 
}

来源

2017-06-06 18:34:03 Tank

谢谢。我搞清楚了:) – Paolo

它看起来像它，因为你在main类有left: 100px。如果你把它拿出来，它会正确居中。

这里是一个应该工作的主要类：

.main { 
    position:fixed; 
    left:100px; 
    height: 100%; 
    right: 0; 
    top:0; 
    bottom:0; 
    background: #33AAAA; 
}

来源

2017-06-06 18:24:09 joshsisley

是的，但我不想要让浅绿色填充整个视口。我想留下一些空间左边的其他东西 – Paolo

在这种情况下，看看我编辑的答案。如果你调整你的'main'类，那应该是有效的。 – joshsisley

居中一个div内的SVG

回答

相关问题