title: How to center 90º rotated text in SVG
body: <p>Working with D3, I want to have a Y axis label which is rotated -90º and centered on the Y axis.  I thought this would be a piece of cake, and wrote the following:</p>
  
  <pre><code>// Y Axis Label
  svg.append('svg:text')
      .attr('class', 'y label')
      .attr('text-anchor', 'middle')
      .attr('y', 0)
      .attr('width', height)
      .attr('transform', 'translate(-' + yAxisSpacing + ',' + height + ') rotate(-90)')
      .text('Y Axis Label')
  </code></pre>
  
  <p><code>height</code> in this case is the height of the chart (the vertical area occupied by svg).  The above code will render a <code>&lt;text&gt;</code> element to the bottom left of the chart, then center the text relative to that bottom left point.  The <code>width</code> does <em>not</em> change and thus instead of being centered it runs off the bottom left hand corner of the svg.</p>
  
  <p>I had guessed that if the <code>width</code> was equal to the <code>height</code> of the chart, then the text within it would become vertically centered.  That doesn't seem to be the case -OR- there is some magic <code>display:block</code> type property I need to set in SVG in order for <code>width</code> to work on the <code>&lt;text&gt;</code> element.</p>
  
  <p>How should this be done?</p>
  
  <hr>
  
  <p>Based on the responses, I went with a javascript route and modified the above line to be (height/2)...</p>
  
  <pre><code>.attr('transform', 'translate(-' + yAxisSpacing + ',' + height / 2 + ') rotate(-90)')
  </code></pre>