中心SVG圖表寬度jQuery

我想中心SVG圖表。目前它的html看起來是這樣的：中心SVG圖表寬度jQuery

<div class="svgWrapper"> 
    <svg>Generated svg chart</svg> 
</div>

我無法指定SVG的寬度和高度，因爲它在響應式設計中。我不能用jQuery

$('svg').width();

回報包裝DIV的寬度得到SVG的寬度和高度，但寬度SVG不等於包裝紙寬度。

<div class="svgWrapper"> 
    <div style="float: left;"> 
     <svg>...</svg> 
    </div> 
</div>

不知道如何與改變瓦特/ SVG的小時幷包裝（包裝高度總是保持相同）生成的SVG圖表verticaly和horizontaly在包裝DIV中心？

來源

2014-01-15 Justinas

包裝你canvas元素的div內分配display: table-cell;，比使用vertical-align: middle;以及text-align: center;對準垂直以及水平

Demo

div { 
    display: table-cell; 
    height: 300px; 
    width: 300px; 
    vertical-align: middle; 
    text-align: center; 
    border: 1px solid #eee; 
} 

canvas { 
    height: 30px; 
    width: 30px; 
    border: 4px solid #f00; 
}

別不想使用display: table-cell;？比你還可以實現這個使用CSS定位。在這裏，我正在爲容器元素分配position: relative;，並且正在製作子元素position: absolute;，因此確保您在那裏使用margin: auto;，因爲這很重要。

div { 
    position: relative; 
    height: 300px; 
    width: 300px; 
    border: 1px solid #eee; 
} 

canvas { 
    height: 30px; 
    width: 30px; 
    border: 4px solid #f00; 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    margin: auto; 
    bottom: 0; 
}

注：難道意識到height和canvas的width是動態的，但我只是用固定用於演示目的。

來源

2014-01-15 12:28:48

中心SVG圖表寬度jQuery

回答

相關問題