中心對齊跨度標記中的SVG

我想中心對齊灰色框中的條形圖。我已經嘗試了各種方法（例如文本對齊：中心，或設置顯示：塊，邊距：0自動）閱讀相關的帖子，並沒有一個似乎工作。中心對齊跨度標記中的SVG

這裏的小提琴： http://jsfiddle.net/nickciao/F6R9C/93/

的HTML：

<div id="Tile"> 
<h2> 
    <span id="Top">0.0%</span> 
</h2> 
<ul class="Middle"> 
    <span>2.9k</span> 
     USERS 
    <span>BECAME ACTIVE</span> 
</ul> 
<div id="Bottom" > 
    <div> 
    <svg id="svg"> 
     <g transform="translate(5,5)"> 
      <rect y="23.33333333333333" x="15" height="11.666666666666671" width="5"> 
      </rect> 
      <rect y="35" x="21" height="0" width="5"> 
      </rect> 
      <rect y="25.666666666666686" x="27" height="9.333333333333314" width="5"> 
      </rect> 
      <rect y="35" x="33" height="4.666666666666686" width="5"> 
      </rect> 
      <rect y="25.666666666666686" x="39" height="9.333333333333314" width="5"> 
      </rect> 
      <rect y="25.666666666666643" x="45" height="9.333333333333357" width="5"> 
      </rect> 
      <rect y="25.666666666666686" x="51" height="9.333333333333314" width="5"> 
      </rect> 
      <rect y="30.333333333333343" x="57" height="4.666666666666657" width="5"> 
      </rect> 
      <rect y="32.666666666666686" x="63" height="2.3333333333333144" width="5"> 
      </rect> 
      <rect y="32.66666666666664" x="69" height="2.333333333333357" width="5"> 
      </rect> 
      <rect y="16.33333333333333" x="75" height="18.66666666666667" width="5"> 
      </rect> 
      <rect y="32.666666666666686" x="81" height="2.3333333333333144" width="5"> 
      </rect> 
      <rect y="35" x="87" height="0" width="5"> 
      </rect> 
      <rect y="35" x="93" height="20.999999999999993" width="5"> 
      </rect> 
      <rect y="35" x="99" height="34.999999999999986" width="5"> 
      </rect> 
     </g> 
    </svg> 
    </div> 
</div>

來源

2015-08-27 nciao

編，看起來它是一個的搞亂這個單獨的矩形寬度向上。是否有CSS方法來確定這些矩形的大小？或者我是否需要計算它們的寬度以完全適合父容器？ – nciao

updated fiddle here

SVG元素是內聯，默認情況下，這樣首先確保你已經將它設置爲顯示塊元素。您可以指定一個邊緣到中心，並適應它的父容器內的元素：

#svgContainer svg { 
    display: block; 
    margin: 0 auto; 
}

然後，您可以充分利用「視框」屬性，以確保您的SVG元素將進行縮放以適合其父容器的邊界：

<svg viewbox="0 0 120 80" height="80">

在您的情況下，viewbox的寬度/高度應該總是與您顯示的圖形的大小相關聯。（假設你想顯示整個圖形，反正。）

這裏的視口和視框在SVG元素是如何一起玩一個很好的參考：http://jonibologna.com/svg-viewbox-and-viewport/

來源

2015-08-27 18:25:51 kirkyoder

，你可以給它一個寬度，然後留下了保證金，右相應

例如

span svg { 
    width:20%; 
    margin-right:40%; 
    margin-left:40%;}

fiddle

來源

2015-08-27 17:43:57

嗯，我想讓它的利潤率較小。看起來如果我將剩餘邊際/剩餘邊距減少到40％以下，它會再次失去對齊。 – nciao

那麼你可以玩寬度只是一個例子。只要他們加起來就是100 –

中心對齊跨度標記中的SVG

回答

相關問題